Pseudo-class/pseudo-elements in CSS

I. Pseudo-class and pseudo-elements

Both pseudo-and pseudo-elements are used to decorate parts that are not in the document tree, except that

A pseudo-class is used to add a corresponding style to an existing element when it is in a state that is dynamically changed according to the user's behavior (for example, hover/:active).

Pseudo-elements are used to create elements that are not in the document tree and add styles to them (for example: Before/:after).

Second, commonly used pseudo-class

Pseudo class	Usage	Compatible
: Link	Non-visited links	Mainstream browsers support
: Visited	Links that have been visited	Mainstream browsers support
: hover	Mouse over link	Mainstream browsers support
: Active	Selected links	Mainstream browsers support
: Focus	Select element input with focus	Mainstream browsers are supported, IE8 must declare <! Doctype>
: Enabled	Element is in the available state	IE8 and earlier versions not supported
:d isabled	Element disabled state	IE8 and earlier versions not supported
: Checked	element in the selected state	IE8 and earlier versions not supported
: First-child	Select the first child element of an element	Mainstream browsers are supported, and IE8 or earlier versions must be declared <! Doctype>
: Last-child	Select the last child element of an element	IE8 and earlier versions not supported
: Nth-child ()	Select one or more specific child elements of an element	IE8 and earlier versions not supported
: Nth-last-child ()	Selects one or more specific child elements of an element starting from the last child element of this element	IE8 and earlier versions not supported
: Nth-of-type ()	Select the specified element	IE8 and earlier versions not supported
: Nth-last-of-type ()	Selects the specified element starting from the last child element of this element	IE8 and earlier versions not supported
: First-of-type	Select the first homogeneous sub-element under a parent element	IE8 and earlier versions not supported
: Last-of-type	Select the last homogeneous sub-element under a parent element	IE8 and earlier versions not supported
: Only-child	Select the only child element under the parent element	IE8 and earlier versions not supported
: Only-of-type	Select the only child element of the same type under the parent element	IE8 and earlier versions not supported
: Empty	Select elements that do not have any content inside the element	IE8 and earlier versions not supported
: Not ()	Select an element other than an element	IE8 and earlier versions not supported
: lang	Define special rules for different languages	Mainstream browsers are supported, IE8 must declare <! Doctype>
: Target	Sets the style of the element to be set as the target element of the anchor connection	IE8 and earlier versions not supported
:d Efault	Set the default style for a form	IE8 and earlier versions not supported
: Valid	Set a valid FORM element	IE8 and earlier versions not supported
: invalid	A form that is applied to an empty, required, or failed validation	IE8 and earlier versions not supported
: Required	Apply to form elements that have required properties	IE8 and earlier versions not supported
: Optional	Apply to form elements that do not have a required attribute	IE8 and earlier versions not supported
: In-range	Apply to an element with a range of constraints, such as a number form	IE8 and earlier versions not supported
: Out-of-range	In contrast to: In-range, specifies a style that is out of range	IE8 and earlier versions not supported
: read-only	Elements applied to content read-only	IE8 and earlier versions not supported
: Read-write	Apply to elements that can be modified by the user	IE8 and earlier versions not supported
: Root	Point to the root element, which is the HTML element	IE8 and earlier versions not supported

three, common pseudo-elements

Pseudo element	Description	Compatible
:: First-line	Select the first row of an element	Mainstream browsers support
:: First-letter	Select the first letter of a text block	Mainstream browsers support
:: Before	Insert content to the front of the element	IE8 and earlier versions not supported
:: After	Insert content behind an element	IE8 and earlier versions not supported
:: Selection	Used to change the default effect of selecting Chinese on a Web page	IE8 and earlier versions not supported
::p Laceholder	::-webkit-input-placeholde ::-moz-placeholder :-ms-input-placeholder Sets the placeholder text for a FORM element	IE8 and earlier versions not supported

Pseudo-class/pseudo-elements in CSS