CSS pseudo-class selector induction

Pseudo-Class selector induction

Pseudo-class selectors are much more difficult to remember without classifying them. We can divide him into two categories first.

• Related to the element itself, similar to the link click before the click
• is related to the structure in which the element is located in the DOM structure, similar to the nth element, or an odd line.

It is related to the state of the element itself.

2. : Link , : Visited , : Hover , : Active
   • : Link refers to the status of hyperlinks before they are accessed
   • : visited refers to the state of the hyperlink after access
   • : hover refers to the status of the mouse hover over the element
   • : Active refers to the turn state when the mouse clicks the element is not placed
     these pseudo-classes are written in a certain order, : Link and : The status of visited represents a Static state , that is, the link is either activated or not activated, the active CSS property overrides the pre-activation attribute if it conflicts with pre-active, and : hover and : Active is the Action property , and the purpose of setting such pseudo-class CSS is to allow the corresponding state to be displayed when the corresponding action is performed, that is, when you want the property to conflict, overwrite the static property. So : hover and : Active pseudo-classes are written later to overwrite static properties, while : Active is also an action on the : hover basis, so , : Hover before : Active .
     Normal order is: : Link : visited : hover : active
4. :focus,:empty,:checked,:enabled,:disabled,:target
   • :focusSets the style of the object when it becomes the input focus (the object's onfocus event occurs).
   • :emptyMatches elements that do not have any child elements (including text nodes)
   • :checkedMatches an element that is selected on the user interface (for input type radio and checkbox)
   • :enabledMatches an element that is in the available state on the user interface
   • :disabledMatches an element that is disabled on the user interface
   • :targetMatch the element pointed to by the related URL
     These pseudo-classes are less common and need to be queried for use.

II. the structure of the elements in the DOM structure

2. Child type: as a condition for children to meet
   • :first-child: The element must be the first child element of its parent element to match
   • :last-child: The element must be the last child element of its parent element to match
   • :nth-child(n): The element must be the nth child element of its parent element to match
   • :nth-last-child(n): The element must be the reciprocal nth child element of its parent element to match
   • :only-child: The element must be the only child element of its parent element to match
4. Of-type type: A sibling of the same element that satisfies the condition
   • :first-of-type: The element must be the first of its parent element to match the class element
   • :last-of-type: The element must be the last of its parent element to match the class element
   • :only-of-type: The element must be the only one of its parent element that matches the class element
   • :nth-of-type(n): The element must be the nth of its parent element to match the class element
   • :nth-last-of-type(n): The element must be the reciprocal nth child element of its parent element to match
6. Other
   • not: Exclude Elements
     Example: Li:not (: first-child): An element that is not the first child element of its parent element is matched by an LI element

CSS pseudo-class selector induction