When I learned jquery last year, I made some selector notes.
I took a look at it over the past few days and found that many of them have forgotten it. So I decided to paste them here for later viewing. This should also be useful to other friends. After all, the selector is the first step in making web pages.
Note is divided into two parts: Today is the CSS selector, and later there is a part of the XPath selector. Today's note contains 44 selectors, basically covering all the rules of CSS 2 and CSS 3.
Serial number |
Selector |
Description |
1. |
* |
Common Element selector, matching any element |
2. |
E |
Tag selector that matches all elements using the E tag |
3. |
. Info |
The class selector matches all elements in the class attribute that contain info. |
4. |
# Footer |
Id selector, matching all elements whose ID attribute is equal to footer |
Instance:
CopyCode The Code is as follows: * {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. Multi-element combination Selector
Serial number |
Selector |
Description |
5. |
E, F |
Multi-element selector that matches all Eelements or f elements simultaneously. Separate E and F with commas (,). |
6. |
E F |
The descendant element selector matches all f elements belonging to the descendant of the Eelement. E and F are separated by spaces. |
7. |
E> F |
Child element selector, matching the child element F of all eElements |
8. |
E + F |
Adjacent to the element selector, matching all elements of the same level F that follow the Eelement |
Instance:
Copy code Code: div P {color: # f00 ;}
# Nav Li {display: inline ;}
# Nav A {font-weight: bold ;}
Div> strong {color: # f00 ;}
P + P {color: # f00 ;}
Iii. CSS 2.1 attribute Selector
Serial number |
Selector |
Description |
9. |
E [ATT] |
Matches all the eElements with the ATT attribute, regardless of its value. (Note: E can be omitted here, for example, "[cheacked]". .) |
10. |
E [ATT = Val] |
Matches all the eElements whose ATT attribute is equal to "Val ". |
11. |
E [ATT ~ = Val] |
Matches all ATT attributes with values separated by multiple spaces, and an Eelement whose values are equal to "Val" |
12. |
E [ATT | = Val] |
Matches all ATT attributes with values separated by font numbers (hyphen-separated), and an Eelement whose values start with "Val", which is mainly used for the lang attribute, for example, "en", "En-us", and "En-GB" |
Instance:
Copy code The Code is as follows: 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 ;}
Iv. pseudo classes in CSS 2.1
Serial number |
Selector |
Description |
13. |
E: First-child |
Match the first child element of the parent Element |
14. |
E: Link |
Match All unclicked links |
15. |
E: visited |
Match all clicked links |
16. |
E: Active |
Match the Eelement that has been pressed and not released by the mouse |
17. |
E: hover |
Matching the Eelement on which the mouse is hovering |
18. |
E: Focus |
Matches the Eelement that obtains the current focus |
19. |
E: Lang (c) |
Matches an Eelement whose Lang property is equal to C. |
Instance:
Copy code The Code is as follows: 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. pseudo elements in CSS 2.1
Serial number |
Selector |
Description |
20. |
E: first-line |
Match the first line of the Eelement |
21. |
E: First-letter |
Match the first letter of the Eelement |
22. |
E: before |
Insert the generated content before the Eelement |
23. |
E: After |
Insert the generated content after the Eelement |
Instance:
Copy code The Code is as follows: P: first-line {font-weight: bold; color; #600 ;}
. Preamble: First-letter {font-size: 1.5em; 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 )")";}
6. General selector of the same level element of CSS 3
Serial number |
Selector |
Description |
24. |
E ~ F |
Matches any F element at the same level after the Eelement |
Instance:
Copy code The Code is as follows: p ~ Ul {Background: # ff0 ;}
VII. CSS 3 attribute Selector
Serial number |
Selector |
Description |
25. |
E [ATT ^ = "Val"] |
Element whose attribute ATT value starts with "Val" |
26. |
E [ATT $ = "Val"] |
Element whose attribute ATT value ends with "Val" |
27. |
E [ATT * = "Val"] |
The value of the attribute ATT contains elements of the "Val" string. |
Instance:
Copy code The Code is as follows: div [ID ^ = "nav"] {Background: # ff0 ;}
8. pseudo classes related to user interfaces in CSS 3
Serial number |
Selector |
Description |
28. |
E: Enabled |
Matches the activated elements in the form. |
29. |
E: Disabled |
Match the disabled elements in the form |
30. |
E: checked |
Match the selected radio or checkbox elements in the form. |
31. |
E: Selection |
Matches the currently selected element of the user. |
Instance:
Copy code The Code is as follows: input [type = "text"]: Disabled {Background: # DDD ;}
9. structural pseudo classes in CSS 3
Serial number |
Selector |
Description |
32. |
E: Root |
Matches the root element of a document. For an HTML document, it is an HTML element. |
33. |
E: Nth-child (N) |
Matches the nth child element of the parent element. The first child element is 1. |
34. |
E: Nth-last-child (N) |
Matches the nth child element of the parent element. The first child element is 1. |
35. |
E: Nth-of-type (n) |
Similar to: Nth-child (), but only matches the elements that use the same label. |
36. |
E: Nth-last-of-type (n) |
Similar to Nth-last-child (), but only matches the elements that use the same label. |
37. |
E: Last-child |
Matches the last child element of the parent element, which is equivalent to Nth-last-Child (1) |
38. |
E: first-of-type |
Match the first child element that uses the same label under the parent element, equivalent to: Nth-of-type (1) |
39. |
E: Last-of-type |
Match the last child element that uses the same label under the parent element, equivalent to: Nth-last-of-type (1) |
40. |
E: Only-Child |
Matches only one child element under the parent element, which is equivalent to: First-child: Last-child or: Nth-Child (1): Nth-last-Child (1) |
41. |
E: only-of-type |
Match the unique sub-element that uses the same label under the parent element, which is equivalent to: First-of-type: Last-of-type or: Nth-of-type (1 ): nth-last-of-type (1) |
42. |
E: empty |
Match an element that does not contain any child element. Note that text nodes are also considered as child elements. |
Instance:
Copy code The Code is as follows: 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 ;}
10. Reverse Selection of pseudo classes in CSS 3
Serial number |
Selector |
Description |
43. |
E: Not (s) |
Matches any element that does not match the current selector. |
Instance:
Copy code The Code is as follows: Not (p) {border: 1px solid # CCC ;}
11. Target pseudo class in CSS 3
Serial number |
Selector |
Description |
44. |
E: Target |
Matching the effect of clicking "ID" in the document |
Please refer to the detailed explanation and examples of this selector on HTML dog.
(End)