Several commonly used selectors in CSS3

After the birth of HTML in the early 1990s, CSS was born at the end of 1996. CSS is specifically designed to define the basic attributes of web pages. So in CSS3, what are the commonly used selectors? Let me introduce it to you today.

The birth of HTML in the early 1990s

At the end of 1996, the first version of CSS was born

May 1998 CSS2 was officially released

2004 CSS2 .1 Release

Release of CSS3 2002 2003 2004 2005 2007 2009 2010

Modular development

CSS1 defines the basic attributes of the web page:

font , color, Basic selector, etc.

CSS2 adds advanced functions based on CSS1

floating and positioning, advanced selector, etc. (sub-selector, relative Neighbor selector, Universal selector)

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

Universal selector: * Select all elements

Select child elements:> Select direct descendants of elements

Adjacent sibling selectors: + Selects the first element immediately after the target element

Ordinary sibling selector: ~ Selects all sibling elements immediately following it

:nth-child Selects the specified index Child element at

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

nth-child(odd) odd-numbered child element

nth-child(even ) Even child element

:nth-last-child(n) The nth child element from the bottom

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

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

: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 parent element The only child element of the specified type under

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

E[attr] attribute name, not sure about the specific attribute value

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

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

E[attr ^= "value"] specifies the attribute name, the attribute value starts with value

E[attr $="value"] specifies the attribute 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 attribute name, and the attribute value starts with value-

UI PseudoClass selector：

:enabled Select the enabled state element

:disabled Select the disabled state element

:checked Select the selected one Input elements (radio buttons or check boxes)

:default Select the default element

:valid, invalid Select valid or invalid input elements based on input validation

: in-range, out-of-range Select elements within or outside the specified range

:repuired, optional Select input elements based on whether the required attribute is allowed or not

Dynamic Pseudo-class selector :

:link selects the link element

:visited selects the element that the user can access

:hover selects the element on which the mouse is hovering

:ative The event triggered when the mouse clicks

:focus The element currently receiving focus

Other pseudo-class selectors:

:not() Negate the selection of the bracketed selector

:lang() Element based on langglobal attribute

:target url fragment The element pointed to by the identifier

:emptySelect the element whose content is empty

:selection The mouse cursor selects the element content

That’s it for the selectors of CSS3, more exciting Please pay attention to other related articles on php Chinese website!

Related reading:

What new background attributes are there in CSS3

How to use CSS3 Media Inquiries

How to make a flexible box in css3

The above is the detailed content of Several commonly used selectors in CSS3. For more information, please follow other related articles on the PHP Chinese website!