Common selectors based on CSS

CSS commonly used selectors

Today, I will introduce some common and commonly used selectors, as well as the classification of
selectors.
1. Basic selectors: 1. Element selector
2. Class selector
3. ID selector
4. Wildcard selector (*): select all in the document element
5. the combination of the selector, the selector and collector (also selected) (with selector between spaced) ** Example: div, p, span {color : red;} while elements of div, p, span of Set the color of the content.
Note: When it is more specific, the combination selector should be calculated separately

2. Hierarchical selector
1. Child selector
parent element> child element {declaration block}
2. Descendant selector
parent element child element {declaration block}
3. Sibling selector (adjacent siblings: there can be no between two elements Any label)
Sibling element A+ Sibling element B {declaration block} (only B can be selected)
4. Universal selector (non-adjacent sibling)
Sibling element A~sibling element B {declaration block} (select all sibling elements B)

3. Pseudo-class selector (forge a class selector)
1.:nth-child(n) Select the nth element
Applicable scenario: all sibling elements have the same label name

:nth-child(2n) select even items (even) :nth-child(2n+1) select odd items (odd) (n starts from 0)
:nth-child(-n+3) select the first three element

2.:nth-of-type(n) Select the nth element (only select the same tag name)
Applicable scenario: the tag names of sibling elements can be different

3.:last-child select the last element
: first-child select the first element
: nth-last-child(n) select the nth last element

4. Negative pseudo-class selector
: not(:nth-child(n)) Except for the nth, all others are selected.
Example: p:not(:nth-child(3)){} Except for the third, all others are selected
Example: p:not(:nth-child(3)):not(:nth-child(4)){} Except for the third and the fourth, the rest are selected

5 Dynamic pseudo-class selector
State 1: :link not visited
State 2: :hover Hovering (mouse in)
State 3: :active When clicked
State 4: :visited Visited
writing order 1: :link/:visited/:hover /:active
writing order 2: :visited/:link/:hover/:active
Note: link/visited only applies to the a tag

6.focus Get focus
When the label is activated, the focus frame is obtained

4. Pseudo element selector (fake an element)
::before adds content before the current element (the first child element) h1::before{content: "content";}
::after adds content after the current element (last A child element) h1::after{content: "content";} The
pseudo-element has a parent-child relationship with the current element
::first-line The first line of the current element h1::first-line{color: gold;}
::first -letter The first letter of the current element (Chinese characters) h1::first-letter{color: gold;}

5. Attribute selector
1. Writing format: element name [attribute] Attribute: attribute name = "attribute value"
p[class="box"]{color:red;}
2. Writing format: element name [name^=" Partial attribute value"] means attribute value starting with XXX (order)
p[name^="f"]{color: blue;}
3. Writing format: element name [name $="Portionspartialbelongpropertyvalue"]tableshowninX-X-X-junctionbeamofthe\; genuspropertyvalue(reverseorder\left)P\right[n-AmE$ = "n-'] {Color: Blue;}

When adding styles in CSS, you must choose a suitable selector, which not only reduces the amount of code, optimizes the code structure, but also makes it more convenient for later maintenance.