2025年css3伪类选择器有哪些（css伪类选择器实例）

新增伪类选择器有：1、“:root”，匹配文档的根素；2、“:first-child”，匹配父素的第一个子素；3、“:last-child”，匹配父素的最后一个子素；4、“:empty”，匹配空素；5、“:target”等等。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

伪类选择器的作用：对已有选择器做进一步的限制，对已有选择器能匹配的素做进一步的过滤。CSS 3提供的伪类选择器主要分为以下三类：

结构性伪类选择器
UI素状态伪类选择器
其他伪类选择器

1、结构性伪类选择器

:root：匹配文档的根素。在HTML文档中，根素永远是素。
:first-child：匹配符合选择器，且必须是其父素的第一个子节点的素。
:last-child：匹配符合选择器，且必须是其父素的最后一个子节点的素。
:nth-child(n)：匹配符合选择器，且必须是其父素的第n个子节点的素。
:nth-last-child(n)：匹配符合选择器，且必须是其父素的倒数第n个子节点的素。
:only-child：匹配符合选择器，且必须是其父素的唯一子节点的素。
:first-of-type：匹配符合选择器，且是与它同类型、同级的兄弟素中的第一个素。
:last-of-type：匹配符合选择器，且是与它同类型、同级的兄弟素中的最后一个素。
:nth-of-type(n)：匹配符合选择器，且是与它同类型、同级的兄弟素中的第n个素。
:nth-last-of-type(n)：匹配符合选择器，且是与它同类型、同级的兄弟素中的倒数第n个素
:only-of-type：匹配符合选择器，且是与它同类型、同级的兄弟素中的唯一一个素。
:empty：匹配符合选择器，且其内部没有任何子素（包括文本节点）的素。
:lang(lang)：匹配符合选择器，且内容是特定语言的素。

对于：nth-child和:nth-last-child两个伪类选择器，还支持如下用法。

　　:nth-child(odd/event)：匹配符合选择器，且必须是其父素的第奇数个/偶数个子节点的素

　　:nth-last-child(odd/event)：匹配符合选择器，且必须是其父素的第奇数个/偶数个子节点的素

　　:nth-child(xn y)：匹配符合选择器，且必须是其父素的第xn y个子节点的素

　　:nth-last-child(xn y)：匹配符合选择器，且必须是其父素的第xn y个子节点的素

使用:nth-last-child伪类选择器的示例如下：

2、UI素状态伪类选择器

UI素状态伪类选择器包含有：

:enabled：匹配所有用户界面（form表单）中处于可用状态的素
:disabled：匹配所有用户界面（form表单）中处于不可用状态的素
:checked：匹配所有用户界面（form表单）中处于选中状态的素
::selection(该选择器前面有两个冒号)：匹配素中被用户选中或处于高亮状态的部分

3、其他伪类选择器

3.1：target伪类选择器（匹配符合选择器且必须是命名锚点目标的素）

　　　　要求素必须是命名锚点的目标，且必须是当前正在访问的目标。它的作用是页面可通过该选择器高亮显示正在被访问的目标。下面示范了:target选择器的用法（该代码为《疯狂HTML 5 CSS 3 JavaScript讲义》中的示例代码）

3.2：not伪类选择器（匹配符合1选择器但不符合2选择器的素，相当于用1减去2）

下面页面代码示范了:not选择器的用法：

从运行结果可以看到，除了id为ajax的所有

素字体设置为#999表示的颜色，且字体加粗显示。

（学习视频分享：css视频教程、web前端）

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索前端的入门与实战技巧！

今天的文章 2025年css3伪类选择器有哪些（css伪类选择器实例）分享到此就结束了，感谢您的阅读。

2025年css3伪类选择器有哪些（css伪类选择器实例）

相关推荐