Special CSS Selector

1. Child element selector>: parent element> child element

2. Adjacent compatriot selector +: element 1 + element 2

Element 2 must be followed by element 1

3. sibling selector ~ : Element 1 ~ Element 2

Element 2 is at the same level as element 1 and is not necessarily followed after element 1

4. wildcard character *:

* The function of selecting a non-child element: p * a {color: red;} indicates the descendant element of p, but not a in the child element.

5. attribute name selector: Tag name [attribute name]

6. Attribute Value selector: Tag name [attribute name = "attribute value"]

7. Link pseudo class:

A: link/* indicates the link. the user does not have any actions */

A: visied/* indicates that the link has been clicked by the user */

A: hover/* indicates that the user's cursor is hovering over the link */

A: active/* indicates that the link is being clicked. To release the mouse */

Note: These four link pseudo classes must be used in this order, but do not write them all.

A colon (:) indicates a pseudo-class, and two colons (: :) indicates the new pseudo elements in CSS3, such as first-letter and first-line.

8. focus pseudo class: focus

9. target pseudo class: target

When a user transfers a link to another element on the page, this element is the target element, and the target pseudo-class style will be applied when the link is transferred.

In this case, the style of the target element is invalid when you click another link to transfer to another element.

10. sub-element pseudo class: first-child,: last-child,: nth-child (n)

11.: first-letter pseudo element and: first-line pseudo element: Add a set style for the first word or the first line

12.: before pseudo elements and: after pseudo elements: add content before or after a specific element, as shown in figure

P: before {content: "insert before content ";}

Note: The search engine does not obtain the contents of pseudo elements, so do not add important content through pseudo elements.