Suddenly I saw the CSS format written by someone else was strange, I could not understand it, I checked it, there are many kinds of selectors, turned over. The original address

Notes are divided into two parts, CSS selectors today and xPath selectors in the future. Today’s notes include 44 selectors, which basically cover all CSS 2 and CSS 3 specifications.

= = = = = = = = = = = = = = = = = = = = =

CSS selector notes

Ruan Yifeng finishing

Basic selector

The serial number The selector meaning
1. * * * * * Universal element selector that matches any element
2. E Tag selector that matches all elements that use the E tag
3. .info Class selector that matches all elements containing info in the class attribute
4. #footer Id selector that matches all elements whose ID attribute is equal to footer

Example:

* { margin:0; padding:0; }

p { font-size:2em; }

.info { background:#ff0; }

p.info { background:#ff0; }

p.info.error { color:#900; font-weight:bold; }

#info { background:#ff0; }

p#info { background:#ff0; }

2. Combinatorial selector of multiple elements

The serial number The selector meaning
5. E,F Multi-element selector that matches all E elements or F elements at the same time, separated by commas
6. E F Descendant element selector that matches all F elements belonging to the descendant of E element, separated by a space between E and F
7. E > F Child element selector that matches F of all E elements
8. E + F The adjacent element selector matches all sibling elements F immediately following E. More accurately, the E + F adjacent element selector matches all sibling elements F immediately following E

Example:

div p { color:#f00; }

#nav li { display:inline; }

#nav a { font-weight:bold; }

div > strong { color:#f00; }

p + p { color:#f00; }

CSS 2.1 Property selector

The serial number The selector meaning
9. E[att] Matches all E elements with the ATT attribute, regardless of its value. (Note: the E can be dropped here, as in “[cheacked]”. The same as below.)
10. E[att=val] Matches all E elements whose att attribute equals “val”
11. E[att~=val] Matches all E elements whose ATT attribute has multiple space-separated values, one of which is equal to “val”
12. E[att|=val] Match E elements with hyphen-separated values for all ATT attributes, one of which starts with “val”, mainly for lang attributes such as “en”, “en-us”, “en-GB”, etc

Example:

p[title] { color:#f00; }

div[class=error] { color:#f00; }

td[headers~=col1] { color:#f00; }

p[lang|=en] { color:#f00; }

blockquote[class=quote][cite] { color:#f00; }

Pseudo-classes in CSS 2.1

The serial number The selector meaning
13. E:first-child The first child that matches the parent should exactly be the first e-tagged child that matches the parent
14. E:link Matches all unclicked links
15. E:visited Matches all links that have been clicked
16. E:active Matches E elements that have not been released while the mouse has been pressed over them
17. E:hover Matches the E element over which the mouse hover
18. E:focus Matches the E element that gets the current focus
19. E:lang(c) Matches E elements whose lang attribute is equal to C

Example:

p:first-child { font-style:italic; }

input[type=text]:focus { color:#000; background:#ffe; }

input[type=text]:focus:hover { background:#fff; }

q:lang(sv) { quotes: “\201D” “\201D” “\2019” “\2019”; }

5. False elements in CSS 2.1

The serial number The selector meaning
20. E:first-line Matches the first row of the E element
21. E:first-letter Matches the first letter of the E element
22. E:before Insert the generated content before the E element
23. E:after Insert the generated content after the E element

Example:

p:first-line { font-weight:bold; color; # 600; }

Preamble: the first – letter {the font – size: 1.5 em; font-weight:bold; }

.cbb:before { content:””; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }

a:link:after { content: ” (” attr(href) “) “; }

CSS 3 universal selector for sibling elements

The serial number The selector meaning
24. E ~ F Matches any sibling F element after E element

Example:

p ~ ul { background:#ff0; }

CSS 3 Property selector

The serial number The selector meaning
25. E [att ^ = “val”] The element whose value of the attribute att begins with “val”
26. E [att $= “val”] The element whose value of the attribute att ends in “val”
27. E [att * = “val”] The value of the att attribute contains elements of the string “val”

Example:

div[id^=”nav”] { background:#ff0; }

CSS 3 user interface related pseudo-classes

The serial number The selector meaning
28. E:enabled Matches the active element in the form
29. E:disabled Matches the disabled elements in the form
30. E:checked Matches the radio (checkbox) or checkbox element selected in the form
31. E::selection Matches the element currently selected by the user

Example:

input[type=”text”]:disabled { background:#ddd; }

Structural pseudo-classes in CSS 3

The serial number The selector meaning
32. E:root Matches the root element of the document, or in the case of an HTML document, the HTML element
33. E:nth-child(n) Matches the NTH child of its parent element, with the first numbered 1
34. E:nth-last-child(n) Matches the penultimate NTH child of its parent element, with the first numbered 1
35. E:nth-of-type(n) Like :nth-child(), but only matches elements that use the same tag
36. E:nth-last-of-type(n) Like: nth-last-Child (), but only matches elements that use the same tag
37. E:last-child Matches the last child of the parent element, equivalent to :nth-last-child(1)
38. E:first-of-type Matches the first child of the same tag under the parent element, equivalent to :nth-of-type(1)
39. E:last-of-type Matches the last child of the parent element using the same tag, equivalent to :nth-last-of-type(1)
40. E:only-child Matches only one child of the parent element, equivalent to :first-child:last-child or :nth-child(1):nth-last-child(1)
41. E:only-of-type Matches the only child element under the parent element that uses the same tag, equivalent to :first-of-type:last-of-type or :nth-of-type(1):nth-last-of-type(1)
42. E:empty Matches an element that does not contain any child elements. Note that text nodes are also considered child elements

Example:

p:nth-child(3) { color:#f00; }

p:nth-child(odd) { color:#f00; }

p:nth-child(even) { color:#f00; }

p:nth-child(3n+0) { color:#f00; }

p:nth-child(3n) { color:#f00; }

tr:nth-child(2n+11) { background:#ff0; }

tr:nth-last-child(2) { background:#ff0; }

p:last-child { background:#ff0; }

p:only-child { background:#ff0; }

p:empty { background:#ff0; }

CSS 3 anti-pick pseudo classes

The serial number The selector meaning
43. E:not(s) Matches any elements that do not match the current selector

Example:

:not(p) { border:1px solid #ccc; }

CSS 3: Target pseudoclass

The serial number The selector meaning
44. E:target Matches the effect of clicking on a specific “ID” in the document

See HTML DOG for a detailed explanation and example of this selector.