What are the new selectors in css3?

Css3 new selectors: "[attribute^=value]", "[attribute$=value]", "[attribute*=value]", ":first-of-type", " :root", ":empty", ":target" and so on.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Attribute selector:

1, [attribute^=value] Matches every element whose attribute value starts with the specified value.

2, [attribute$=value] Matches every element whose attribute value ends with the specified value.

3, [attribute*=value] Matches every element whose attribute value contains the specified value.

2. Pseudo-element and pseudo-class selectors:

##:enabledinput:enabledSelect each enabled input element3:disabledinput:disabledSelect each disabled input element3:checkedinput:checkedSelect each selected input element3:not(:not(p)Select every element that is not a p element3: :selection::selectionThe part of the matching element that is selected or highlighted by the user3##: out-of-range:in-range:read-write :read-only:optional:required:valid:invalid3. Level selector:

Selector	Example	Example description	CSS
:first-of-type	p:first-of-type	Select each p element to be its parent The first p element of level	3
:last-of-type	p:last-of-type	Select each p element that is the last p element of its parent	3
:only-of-type	p:only- of-type	Select the only p element for which each p element is its parent	3
:only-child	p:only-child	Select each p element that is the only child element of its parent	3
:nth-child(n)	p:nth-child(2)	Select each p element that is the second child element of its parent	3
:nth-last-child(n)	p:nth-last-child(2)	Select each The p element is the second child element of its parent, counting from the last child	3
:nth-of-type(n)	p:nth-of-type(2)	Select each p element that is the second p element of its parent	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selecting each p element is the second p element of its parent, counting from the last child	3
:last-child	p:last-child	Selects each p element that is the last child of its parent.	3
:root	:root	Select the root element of the document	3
:empty	p:empty	Select every p element (including text nodes) that does not have any children	3
:target	#news:target	Select the currently active #news element (the clicked URL that contains the anchor name)	3
selector)
:out-of-range	Matches input elements whose values ​​are outside the specified range	3
:in-range	Match input elements whose value is within the specified range	3
:read-write	Used to match readable and writable elements	3
:read-only	Used to match elements with the "readonly" attribute set	3
:optional	is used to match optional input elements	3
:required	Used to match elements with the "required" attribute set	3
:valid	is used to match elements whose input value is legal	3
:invalid	Used to match elements with illegal input values ​​	3

• E~F

  Universal selector (find all subsequent sibling elements)

  Select the matching F element and all the elements after the matching E element Matching F element

(Learning video sharing:

css video tutorial

)

The above is the detailed content of What are the new selectors in css3?. For more information, please follow other related articles on the PHP Chinese website!