What are the pseudo-classes added in CSS3 and what are their effects?

What this article brings to you is about what are the additional pseudo-classes in CSS3 and what are their effects? Have a certain reference value, the need for friends can refer to, I hope to help you.

1. Pseudo-class and pseudo-elements

CSS pseudo-class: Used to add special effects to certain selectors.

CSS pseudo-elements: used to add special effects to certain selectors. Pseudo-elements represent the child elements of an element that, while logically present, do not actually exist in the document tree.

Pseudo element	Role
:: First-letter	Add a style to the first letter of the text
:: First-line	Add a style to the first line of text
:: Before	Insert some content before an element
:: After	Insert some content after an element

The effect of a pseudo-class can be achieved by adding an actual class, while the effect of the pseudo-element needs to be achieved by adding an actual element, which is why they are called pseudo-classes, a pseudo-element.

CSS3 in order to distinguish between pseudo-classes and pseudo-elements, the pseudo-class is explicitly represented by a colon, while the pseudo-element is represented by two colons. But because of the compatibility problem, so now most of the unified single colon, but aside from the problem of compatibility, we should try to develop good habits when writing, to distinguish between the two.

A single colon (:) used for CSS3 pseudo-classes, double colons (::) for CSS3 pseudo-elements. A pseudo-element consists of a double colon and a pseudo-element name. However, the browser needs to support the old existing pseudo-elements, such as: First-line,: First-letter,: Before, after, and the new pseudo-element introduced in CSS3 does not allow the old single colon to be supported.

2, CSS3 new Pseudo-class

New Pseudo-Class	Role
P:first-of-type	Select each <p> element that belongs to the first <p> element of its parent element.
P:last-of-type	Select each <p> element that belongs to the last <p> element of its parent element.
P:only-of-type	Select each <p> element that belongs to the <p> element that is unique to its parent element.
P:only-child	Selects each <p> element that belongs to a child element that is unique to its parent element.
P:nth-child (N)	Selects each <p> element that belongs to the nth child element of its parent element.
P:nth-last-child (N)	Selects each <p> element that belongs to the reciprocal nth child element of its parent element.
P:nth-of-type (N)	Selects each <p> element that belongs to the nth <p> element of its parent element.
P:nth-last-of-type (N)	Select each <p> element that belongs to the nth <p> element of its parent element.
P:last-child	Selects each <p> element that belongs to the last child element of its parent element.
P:empty	Select each <p> element that has no child elements (including text nodes).
P:target	Select the <p> element for the current activity.
: Not (P)	Select each element of the non-<p> element.
: Enabled	Controls the available state of the form control.
:d isabled	Controls the disabled state of the form control.
: Checked	The Radio box or check box is selected.

pseudo-class	function
: hover	add a style to the mouse hover element
: Active	Add a style to the element being activated
: Focus	Styles added to the focusable element
: Link	Add styles to links that have not been visited
: visited	Styles added to visited links
: First-child	Add a style to the first child element of an element
: lang	defines the language used in the specified element