What are the three selector commonly used in CSS3

Today, I would like to share with you the relevant knowledge of what the three commonly used selectors in CSS3 are. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Modular development

The basic properties of a web page are defined in CSS1:

Font, color, basic selector, etc.

Advanced features have been added to CSS2 based on CSS1

Floating and positioning, advanced selector, etc. (sub-selector, adjacent selector, general selector)

CSS3 follows modular development. The release time is not a point in time, but a period of time.

Universal selector: * Select to all elements

Select child element: > Select the direct descendant of the element

Neighboring sibling selector: + Select to the first element immediately after the target element

Normal sibling selector: ~ Select to all sibling elements that follow

: nth-child selects the child element at the specified index

The nth child element under the nth-child (n) parent element

Nth-child (odd) Odd Child element

Nth-child (even) even child elements

: nth-last-child (n) the nth penultimate child element

: nth-of-type (n) the nth child element of the specified type under the parent element

: the penultimate child element of the specified type under the parent element of nth-last-of-type

: first-child selects the first child element under the parent element

: last-child selects the last child element under the parent element

: only-child selects the only child element under the parent element

: only-of-type selects the only child element of the specified type under the parent element

: root selects the root directory of the document and returns html

E [attr] attribute name, uncertain specific attribute value

E [attr= "value"] specifies the attribute name and its corresponding attribute value

E [attr ~ = "value"] specifies the attribute name, which has multiple attribute values separated by spaces and contains the value value

E [attr ^ = "value"] specifies the property name, and the attribute value begins with value

E [attr $= "value"] specifies the property name, and the attribute value ends with value

E [attr * = "value"] specifies the attribute name, and the attribute value contains value

E [attr | = "value"] specifies the property name, and the attribute value begins with value-

UI pseudo-class selector:

: enabled Select enable status element

Disabled chooses to disable the status element

: checked Select the selected input element (radio button or check box)

Default selects the default element

Valid and invalid select valid or invalid input elements based on input validation

In-range and out-of-range select elements that are within or outside the specified range

Repuired and optional select input elements based on whether the: required attribute is allowed or not

Dynamic pseudo-class selector:

: link select link element

Visited selects the elements that the user accesses

: hover mouse over the elements on it

Events triggered by ative mouse clicks

: the element that focus is currently getting focus on

Other pseudo-class selectors:

Not () reverses the selection of selector in parentheses

: lang () elements based on the global attribute of lang

The element that the target url fragment identifier points to

: empty selects elements with empty content

: selection mouse cursor selection element content

These are all the contents of this article entitled "what are the three commonly used selectors in CSS3?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.