The pseudo-class of CSS design guidelines

Pseudo-classes are called because they are similar to classes, but no classes are actually attached to tags in tags. There are two kinds of pseudo-classes.

• The UI pseudo-class applies a CSS style to an HTML element when it is in a state, such as when the mouse pointer is over a link.
• A structured pseudo-class applies a CSS style to the corresponding element when there is a structural relationship in the tag (for example, if an element is the first or last of a set of elements).

I. UI pseudo-Class

1. Link pseudo-Class

• Link: At this point, the links are there waiting for the user to click.
• Visited: The user has previously clicked on this link.
• Hover: The mouse pointer is hovering over the link.
• Active: Link is being clicked (mouse pressed on element, not released)

Recommended by "love?ha!" Order to declare the link pseudo-class, otherwise the browser may not display the expected effect.

Note that some pseudo-classes can be used for any element, not just a element, such as the following rule to make the paragraph background gray when hovering over the mouse.

P:hover{background-color:gray;}

2.: Focus Pseudo-class

When an element declares a focus pseudo-class, the corresponding CSS rule is applied when it gets the focus.

3.: Target Pseudo class

If a user clicks on a link to another element in the page, that element is the target, which can be selected using the target pseudo-class.

Two. Structured pseudo-Class

1.: First-child and: Last-child

: First-child represents the first element in a group of sibling elements, whereas: Last-child represents the last element in the sibling element.

2.: Nth-child (N)

n represents a value, such as Li:nth-child (3)

3.odd and even are keywords that can be used to match sub-elements with an odd or even number subscript (the subscript for the first child element is 1)

Usage: nth-child (odd), nth-child (even)

Of course there are similar: Use the formula (an + b). Description: Indicates the length of the period, N is the counter (starting at 0), and B is the offset value. See the CSS Help documentation for details.

The above is the knowledge of the pseudo-Class I know.

The pseudo-class of CSS design guidelines