What are the new selectors in css3-Front-end Q&A-php.cn

What are the new selectors in css3

青灯夜游

Release： 2022-03-15 14:57:05

Original

4242 people have browsed it

css3 selectors include: "[att^="val"]", "[att$="val"]", "[att*="val"]", ":root", " :nth-child(n)", ":last-child", ":only-child", ":empty" and so on.

What are the new selectors in css3

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

New selector in css3

##Attribute selector(most browsers except IE6 Device support)

E[att^="val"] Elements whose attribute att value starts with "val"

E[att$="val"] Elements whose attribute att value ends with "val"

## E[att*="val "] The value of the attribute att contains the element of the "val" string

##Example: p [id^="nav"] {background:#000;}
##Structure pseudo-class selector

(Filter selector)

(Note: FireFox 1.5/2.0/3.0 supports E:root, FireFox 3.0 supports E:last-child, E:empty, due to IE6/ 7/8 is not supported, so choose the appropriate scenario to use it

)

##5E:nth-last-of-type(n)with:nth- last-child() works similarly, but only matches elements using the same tag ##67891011

UI status pseudo-class selector (not supported by IE6/7/8)

Serial number	Selector	Meaning	Instance
1	E:root	Matches the root element of the document. For HTML documents, it is the HTML element
2	E:nth-child(n)	Matches the nth child element of its parent element, the first number is 1	p:nth-child(3) { color:#f00 ; }
3	E:nth-last-child(n)	Matches the nth child element from the last of its parent element, the first The number is 1	p:last-child { background:#ff0; }
4	E:nth-of-type(n )	Similar to :nth-child(), but only matches elements using the same tag	p:nth-of-type(2){color:red;}Select the nth child element of the parent element p

E:last-child	Matches the last child element of the parent element, equivalent to: nth-last-child(1)
E: first-of-type	matches the first child element using the same tag under the parent element, which is equivalent to: nth-of-type(1)
E:last-of-type	Matches the last child element using the same tag under the parent element, which is equivalent to:nth-last-of-type( 1)
E:only-child	matches the only child element under the parent element, which is equivalent to In:first-child:last-child or:nth-child(1):nth-last-child(1)	p:only-child { background:#ff0; }
E:only-of-type	Matches the only child element using the same tag under the parent element, which is equivalent to: first-of-type:last -of-type or:nth-of-type(1):nth-last-of-type(1)
E:empty	Matches an element that does not contain any child elements. Note that text nodes are also considered child elements	p:empty { background:#ff0; }

Serial number	Selector	Meaning	Instance
1	E :enabled	Match activated elements in the form
2	E:disabled	Match the form Disabled elements in	input[type="text"]:disabled { background:#ddd; }
3	E:checked	Match the selected radio (radio button) or checkbox (checkbox) element in the form
4	E::selection	Match the element currently selected by the user

Level element universal selector

Serial number	Selector	Meaning	Instance
1	E ~ F	Matches any sibling F element after the E element	p ~ ul { background:#ff0; }

Inverse selection pseudo-class

Serial number	Selector	Meaning	Example
1	E:not(s)	The match does not match the current Any element of the selector	:not(p) { border:1px solid #ccc; }

: Target pseudo-class

## Serial numberSelectorMeaningInstance1##(Learning video sharing:


	E:target	The effect after clicking on a specific "id" in the matching document

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!