Table of contents
2. Structural pseudo-class selector
4. UI state pseudo class selector
5. Invert the pseudo-class selector
Seven, father selector, offspring selector
8. Adjacent sibling selector, sibling selector
1. Attribute selector
(supported by most browsers except IE6)
E: a label element such as div, arr: an attribute of the element:
| Selector | explain | example |
| E[arr^='value'] | Select the E element whose attribute starts with 'value' |   |
| E[arr$='value'] | Select the E element whose attribute ends with value |   |
| E[arr*='value'] | Select the E element whose attribute contains value |   |
Replenish:
1. E:root——Match the root element of the document. For HTML documents, it is the HTML element
2. E:empty——Matches an element that does not contain any child elements. Note that text nodes are also considered child elements
2. Structural pseudo-class selector
(FireFox 1.5/2.0/3.0 supports E:root, FireFox 3.0 supports E:last-child, E:empty, IE6/7/8 does not support)
| Selector | explain | example |
| E:first-child | The first child element under the parent element |   |
| E:last-child | The last child element under the parent element | slightly |
| E:nth-child(n) | The nth child element under the parent element | slightly |
| E:nth-child(even) | The even-numbered child element under the parent element |   |
| E:nth-child(odd) | The odd-numbered child element under the parent element | slightly |
| E:nth- child (official) | Each child element referred to by the formula below the parent element | slightly |
| E:first-of-type、last-of-type | The first E element under the parent element, the last E element under the parent element |   |
| E:nth-of-type(n)、nth-of-type(公式) | The nth E element under the parent element, each E element referred to by the formula under the parent element |   |
| E:nth-of-type(even) | The even-numbered E element under the parent element |   |
| E:nth-of-type(odd) | The odd-numbered E element under the parent element | slightly |
| The difference between E:nth- child and E:nth- of-type | 1. The object of E:nth-child(n) refers to all child elements under the E element; while the object of nth-of-type(n) refers to all E elements under the parent element; 2. E:nth-child(n) is not necessarily rendered. When the nth element is not E, the style cannot be rendered; nth- of-type(n) must be rendered |
  |
3. Pseudo-element selector
As the name implies, fake elements mainly mean that E::before can add a pseudo element before the E element, and E::after can add a pseudo element after the E element.
| Selector | explain | example |
| E::before | Used to insert content before element content |
|
| E::after | Used to insert content after the element content | slightly |
| E::first-letter | Styling the first letter or text in the text of an E element |   |
| E::first-line | Used to add styles to the first line of text | slightly |
4. UI state pseudo class selector
| Selector | explain | example |
| E:enabled | Matches active elements in the form |   |
| E:disabled | Matches disabled elements in the form |   |
| E:checked | Matches selected radio (radio box) or checkbox (check box) elements in the form |    |
| E::selection | Match the element currently selected by the user (the text content selected by the mouse on the browser is originally light blue, but it is given a new selected style through E::selection) |   |
5. Invert the pseudo-class selector
| Selector | explain | example |
| E:not(s) | Matches all E selectors that are not s in the E selector |   |
Six, target selector
| Selector | explain | example |
| E:target | Matches the effect of clicking on a specific "id" in the document |   |
Seven, father selector, offspring selector
| Selector | explain | example |
| parent selector div>p{...} | child element of the E element |   |
| descendant selector div p{...} |
All descendant elements such as child elements and grandchildren elements of the E element |   |
8. Adjacent sibling selector, sibling selector
| Selector | explain | example |
| Adjacent sibling selector: E+F | Matches the nearest sibling element |   |
| Sibling selector: E ~ F | matches any sibling F element after the E element |
|
Ten, finally
Welcome to correct or add in the comment area.