Home >Web Front-end >Front-end Q&A >What are the new selectors in css3
css3 selectors include: "[att^="val"]", "[att$="val"]", "[att*="val"]", ":root", " :nth-child(n)", ":last-child", ":only-child", ":empty" and so on.
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
(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
)
| 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:nth-last-of-type(n) | with:nth- last-child() works similarly, but only matches elements using the same tag | ||
| 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
| Selector | Meaning | Instance | |
|---|---|---|---|
| E:target | The effect after clicking on a specific "id" in the matching document |
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!