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

大家好，我是讯享网，很高兴认识大家。

  <?xml encoding="utf-8" ?><html><body><blockquote><p>新增伪类选择器有：1、“:root”，匹配文档的根元素；2、“:first-child”，匹配父元素的第一个子元素；3、“:last-child”，匹配父元素的最后一个子元素；4、“:empty”，匹配空元素；5、“:target”等等。</p></blockquote><p><img src="https://img.php.cn/upload/article/202204/25/2022042515063469713.jpg"></p><p>本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。</p><p>伪类选择器的作用：对已有选择器做进一步的限制，对已有选择器能匹配的元素做进一步的过滤。CSS 3提供的伪类选择器主要分为以下三类：</p><ul><li>结构性伪类选择器</li><li>UI元素状态伪类选择器</li><li>其他伪类选择器</li></ul><p><span  style="max-width:90%"><strong>1、结构性伪类选择器</strong></span></p><ul><li>:root：匹配文档的根元素。在HTML文档中，根元素永远是<html...></html...>元素。</li><li>:first-child：匹配符合选择器，且必须是其父元素的第一个子节点的元素。</li><li>:last-child：匹配符合选择器，且必须是其父元素的最后一个子节点的元素。</li><li>:nth-child(n)：匹配符合选择器，且必须是其父元素的第n个子节点的元素。</li><li>:nth-last-child(n)：匹配符合选择器，且必须是其父元素的倒数第n个子节点的元素。</li><li>:only-child：匹配符合选择器，且必须是其父元素的唯一子节点的元素。</li><li>:first-of-type：匹配符合选择器，且是与它同类型、同级的兄弟元素中的第一个元素。</li><li>:last-of-type：匹配符合选择器，且是与它同类型、同级的兄弟元素中的最后一个元素。</li><li>:nth-of-type(n)：匹配符合选择器，且是与它同类型、同级的兄弟元素中的第n个元素。</li><li>:nth-last-of-type(n)：匹配符合选择器，且是与它同类型、同级的兄弟元素中的倒数第n个元素</li><li>:only-of-type：匹配符合选择器，且是与它同类型、同级的兄弟元素中的唯一一个元素。</li><li>:empty：匹配符合选择器，且其内部没有任何子元素（包括文本节点）的元素。</li><li>:lang(lang)：匹配符合选择器，且内容是特定语言的元素。</li></ul><blockquote><p>对于：nth-child和:nth-last-child两个伪类选择器，还支持如下用法。</p><p>　　:nth-child(odd/event)：匹配符合选择器，且必须是其父元素的第奇数个/偶数个子节点的元素</p><p>　　:nth-last-child(odd/event)：匹配符合选择器，且必须是其父元素的第奇数个/偶数个子节点的元素</p><p>　　:nth-child(xn y)：匹配符合选择器，且必须是其父元素的第xn y个子节点的元素</p><p>　　:nth-last-child(xn y)：匹配符合选择器，且必须是其父元素的第xn y个子节点的元素</p></blockquote><p>使用:nth-last-child伪类选择器的示例如下：</p><p>其效果如下：<br></p><p><img src="https://img.php.cn/upload/image/735/492/447/1650870192619758.png" title="1650870192619758.png" alt="1.png"></p><p><strong><span  style="max-width:90%">2、UI元素状态伪类选择器</span></strong></p><p>UI元素状态伪类选择器包含有：</p><ul style="list-style-type: disc;"><li><p>:enabled：匹配所有用户界面（form表单）中处于可用状态的元素</p></li><li><p>:disabled：匹配所有用户界面（form表单）中处于不可用状态的元素</p></li><li><p>:checked：匹配所有用户界面（form表单）中处于选中状态的元素</p></li><li><p>::selection(该选择器前面有两个冒号)：匹配元素中被用户选中或处于高亮状态的部分</p></li></ul><p><strong><span style="font-size: 18px;">3、其他伪类选择器</span></strong></p><p><strong>3.1：target伪类选择器（匹配符合选择器且必须是命名锚点目标的元素）</strong></p><p>　　　　要求元素必须是命名锚点的目标，且必须是当前正在访问的目标。它的作用是页面可通过该选择器高亮显示正在被访问的目标。下面示范了:target选择器的用法（该代码为《疯狂HTML 5 CSS 3 JavaScript讲义》中的示例代码）</p><p><img src="https://img.php.cn/upload/image/700/456/922/1650870317487871.gif" title="1650870317487871.gif" alt="2.gif"></p><p><strong>3.2：not伪类选择器</strong>（匹配符合1选择器但不符合2选择器的元素，相当于用1减去2）<br></p><p>下面页面代码示范了:not选择器的用法：</p><p><img src="https://img.php.cn/upload/image/711/272/738/1650870354557990.png" title="1650870354557990.png" alt="3.png"></p><p>从运行结果可以看到，除了id为ajax的所有</p><li...></li...>元素字体设置为#999表示的颜色，且字体加粗显示。<p>（学习视频分享：css视频教程、web前端）</p></body></html>

讯享网

前端入门到VUE实战笔记：立即学习

讯享网 <br>>在学习笔记中，你将探索 前端 的入门与实战技巧！</p></blockquote>

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

相关推荐