Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.