（伪）选择器使您可以将样式分配给实际上是由某些元素的状态，文档中的标记模式甚至文档本身的状态推断出的幻影类。
-CSS：权威指南：Eric Meyer，Estelle Weyl
这篇文章是对鼓励在构建 UI 时使用更多普通 CSS 和更少 JS 的一种鼓励。熟悉 CSS 所提供的一切都是实现这一目标的一种方法-另一种是实现最佳实践并尽可能地重用该代码。
::first-line | 选择文本的第一行
伪选择器会在换行之前影响文本的第一行。
p:first-line {
color: lightcoral;
}
::first-letter| 选择第一个字母
该伪选择器适用于元素中文本的第一个字母。
.innerDiv p:first-letter {
color: lightcoral;
font-size: 40px
}
::selection | 突出显示（选定）区域
这适用于用户已突出显示的任何区域。
使用::selection 伪选择器，我们可以将样式应用于突出显示的区域。
div::selection {
background: yellow;
}
:root | 基本要素
:root 伪类选择文档的根元素。在 HTML 中，它始终是 HTML 元素。在 RSS 中，它是 RSS 元素。
该伪选择器最适用于使用 CSS 变量存储全局规则值，因为它适用于根元素。
:empty | 仅在项目为空时适用
该伪选择器将选择没有任何子项的任何元素。元素必须为空。如果元素没有空格，可见内容或后代元素，则为空。
div：empty {
border：2px solid orange;
}
该规则将适用于空div元素。该规则将应用于第一个和第二个div，因为它们确实是空的，而不是第三个div，因为它具有空格。
:only-child | 选择一个独生子女
这适用于作为其父元素的唯一子元素的元素。
.innerDiv p:only-child {
color: orangered;
}
:first-of-type | 选择指定类型的第一个子元素
.innerDiv p:first-of-type {
color: orangered;
}
这将适用于段落元素.innerDiv 的 p 第一个孩子。
<div class="innerDiv">
<div>Div1</div>
<p>这些是必要的步骤</p>
<p>嗨</p>
<p>
Do <em>not</em> 在踩油门的同时踩下制动器
</p>
<div>Div2</div>
</div>
选择 p（“这些是必要的步骤”）。
:last-of-type | 选择指定类型的 ast 子元素
.innerDiv p:last-of-type {
color: orangered;
}
和:first-of-type 相同，但这会影响相同类型的最后一个子元素。
:nth-of-type() | 选择指定类型的子元素
该选择器将从指定的父元素列表中选择某种类型的元素。
.innerDiv p:nth-of-type(1) {
color: orangered;
}
:nth-last-of-type() | 在列表末尾选择类型的子元素
这将选择特定类型的最后一个子元素。
.innerDiv p:nth-last-of-type() {
color: orangered;
}
这将选择该元素中包含的列表 innerDiv 以及类型为段落元素的列表中的最后一个子元素。
结论
伪选择器其实还有很多，但是它们不是常用的，因此就没一一列举介绍它们。
最后非常感谢收看，一起遨游知识的海洋 😊😊
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于