css3新增的伪类有哪些 - 码农知识堂

css3新增的伪类有哪些
CSS3 引入了许多新的伪类选择器，这些选择器为开发者提供了更多的样式控制选项。以下是一些 CSS3 中新增的主要伪类选择器：
1. 结构性伪类：
  - :root：选择文档的根元素（通常是）。
  - :empty：选择没有子节点的元素（包括文本节点）。
  - :first-of-type：选择其父元素中的第一个类型的元素。
  - :last-of-type：选择其父元素中的最后一个类型的元素。
  - :only-of-type：选择其父元素中唯一的类型的元素。
  - :nth-of-type(n)：选择其父元素中的第 n 个类型的元素。
  - :nth-last-of-type(n)：选择其父元素中的倒数第 n 个类型的元素。
2. UI伪类：
  - :enabled：选择可用的表单元素。
  - :disabled：选择被禁用的表单元素。
  - :checked：选择被选中的元素（例如，单选框或复选框）。
  - :default：选择默认被选中的或
  - :valid：选择输入值有效的表单元素。
  - :invalid：选择输入值无效的表单元素。
  - :in-range：选择输入值在指定范围内的元素。
  - :out-of-range：选择输入值不在指定范围内的元素。
  - :required：选择设置了 required 属性的表单元素。
  - :optional：选择没有设置 required 属性的表单元素。
  - :readonly：选择设置了 readonly 属性的表单元素。
  - :writeable：选择没有设置 readonly 属性的表单元素。
3. 其他伪类：
  - :backdrop：用于全屏的背景界面（通常与全屏API一起使用）。
  - :fullscreen：选择全屏显示的元素。
  - :placeholder-shown：选择当前显示占位符文本的或 </code> 元素。</li><li><code>:dir()</code>：基于元素的文本方向（例如 <code>:dir(ltr)</code> 或 <code>:dir(rtl)</code>）来选择元素。</li><li><code>:lang()</code>：基于元素的语言属性来选择元素。</li><li><code>:not()</code>：选择不匹配特定选择器的元素。</li><li><code>:any-link</code>：选择所有链接（<code><a></code>、<code><area></code> 和 <code><link></code> 元素）。</li><li><code>:current</code>（伪元素）：用于选择当前元素（如 <code>::current</code> 在 <code>:range</code> 输入类型中）。注意这不是一个标准的 CSS 伪类，但在某些上下文中可能会遇到。</li></ul></li></ol> <p>请注意，某些<a href="https://so.csdn.net/so/search?q=%E4%BC%AA%E7%B1%BB&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E4%BC%AA%E7%B1%BB&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"伪类\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E4%BC%AA%E7%B1%BB&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"伪类\"}"}" data-tit="伪类" data-pretit="伪类">伪类</a>（如 <code>:fullscreen</code> 和 <code>:backdrop</code>）可能并不是所有浏览器都支持，或者可能需要特定的API（如全屏API）才能触发。同时，<code>:any-link</code> 和 <code>:current</code> 并不是真正的 CSS3 伪类，但它们在这里被提及是为了完整性。</p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/855699">Windows OpenGL ES 波浪特效</a> <br /> <a href="/Article/Index/754367">如何选择外贸网站服务器？</a> <br /> <a href="/Article/Index/1074337">肠道类器官培养基</a> <br /> <a href="/Article/Index/947215">【Pytorch深度学习实战】（5）卷积神经网络（CNN）</a> <br /> <a href="/Article/Index/932317">护眼灯频闪是什么意思？无频闪护眼灯哪个好</a> <br /> <a href="/Article/Index/730452">pdf怎么转换成ppt呢?看完每个人都会</a> <br /> <a href="/Article/Index/1437557">腾讯觅影数智医疗影像平台获颁世界互联网领先科技成果大奖</a> <br /> <a href="/Article/Index/1618526">.NET Aspire 正式发布：简化 .NET 云原生开发</a> <br /> <a href="/Article/Index/955952">Vue组件template标签波浪线报错</a> <br /> <a href="/Article/Index/664986">④、企业快速开发平台Spring Cloud之HTML 段落</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/ggq53219/article/details/139636401 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>