Home >Web Front-end >Front-end Q&A >What are the new pseudo-class selectors in css3?
The new pseudo-class selectors are: 1. ":root", matching the root element of the document; 2. ":first-child", matching the first child element of the parent element; 3. ": last-child", matches the last child element of the parent element; 4. ":empty", matches empty elements; 5. ":target" and so on.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
The role of pseudo-class selectors: further restrict existing selectors and further filter elements that can be matched by existing selectors. The pseudo-class selectors provided by CSS 3 are mainly divided into the following three categories:
1. Structural pseudo-class selector
For the two pseudo-class selectors: nth-child and :nth-last-child, the following usage is also supported.
:nth-child(odd/event): Matches elements that match the selector and must be the odd/even child node of its parent element
:nth-last-child( odd/event): Matches the element that matches the selector and must be the odd/even child node of its parent element
:nth-child(xn y): Matches the selector and must be its parent element The element of the xn yth child node of the parent element
:nth-last-child(xn y): Matches the element that matches the selector and must be the xn yth child node of its parent element
An example of using the :nth-last-child pseudo-class selector is as follows:
<meta> <meta> <title> child </title> <style> /* 定义对作为其父元素的倒数第3n 1个(1、4、7)子节点 的li元素起作用的CSS样式 */ li:nth-last-child(3n+1) { background-color: #FFC0CB; } </style>
The effect is as follows:
2. UI element status pseudo-class selector
UI element status pseudo-class selector includes:
:enabled : Matches all elements in the available state in the user interface (form form)
: disabled: Matches all elements in the disabled state in the user interface (form form)
:checked: Matches all selected elements in the user interface (form form)
::selection (there are two colons in front of the selector): Match the part of the element that is selected or highlighted by the user
3. Other pseudo-class selectors
3.1: Target pseudo-class selector (matches elements that match the selector and must be the target of a named anchor)
It is required that the element must be the target of the named anchor and must be currently being accessed The goal. Its purpose is that the page can highlight the target being visited through this selector. The following demonstrates the usage of the target selector (the code is the sample code in "Crazy HTML 5 CSS 3 JavaScript Handouts")
<meta> <title> :target </title> <style> :target { background-color: #ff0; } </style> <p> <a>疯狂Java讲义</a> | <a>轻量级Java EE企业应用实战</a> | <a>疯狂Android讲义</a> | <a>经典Java EE企业应用实战</a> </p> <div> <h2>疯狂Java讲义</h2> <p>本书详细介绍了Java语言各方面的内容。</p> </div> <div> <h2>轻量级Java EE企业应用实战</h2> <p>本书详细介绍Struts 2、Spring 3、Hibernate三个框架整合开发的知识</p> </div> <div> <h2>疯狂Android讲义</h2> <p>本书详细介绍了Android应用开发的知识。</p> </div> <div> <h2>经典Java EE企业应用实战</h2> <p>本书详细介绍JSF 、EJB 3、JPA等Java EE相关的知识</p> </div>
3.2: not pseudo Class selector (matching elements that match selector 1 but not selector 2, equivalent to subtracting 2 from 1)
The code on the following page demonstrates the use of the :not selector:
<meta> <title> :not </title> <style> li:not(#ajax) { color: #999; font-weight: bold; } </style>
As you can see from the running results, except for the font of all
(Learning video sharing: css video tutorial, web front-end)
The above is the detailed content of What are the new pseudo-class selectors in css3?. For more information, please follow other related articles on the PHP Chinese website!