译者：@Jack Chen

原文：

https://blog.bitsrc.io/css-pseudo-selectors-you-never-knew-existed-b5c0ddaa8116

CSS中（伪类）选择器允许您将样式分配给实际上是由特定元素的状态或文档中的标记模式（甚至是文档本身的状态）推断出来的幻像类。

这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的JS。熟悉CSS所提供的一切是实现这一目标的一种方法——另一种方法是实现最佳实践并尽可能多地重用代码。

::first-line | 选择第一行文本

这个伪类选择器影响换行之前的第一行文本，代码如下：

p:first-line {
    color: lightcoral;
}

::first-letter | 选择第一个字母

这个伪类选择器应用于p元素中文本的第一个字母，代码如下：

.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></div>
<div>
</div>

该规则将应用于空的div元素。该规则将应用于第一个和第二个div，因为它们确实是空的，而不是第三个div，因为它有空白。

:only-child | 选择一个子元素

这适用于作为父元素的唯一子元素的元素。

.innerDiv p:only-child {
    color: orangered;
}

:first-of-type | 选择指定类型的第一个子元素

.innerDiv p:first-of-type {
    color: orangered;
}

这将适用于p段落元素的innerdiv类的第一个子元素。

<div class="innerDiv">
    <div>Div1</div>
    <p>These are the necessary steps</p>
    <p>hiya</p>
    
    <p>
        Do <em>not</em> push the brake at the same time as the accelerator.
    </p>
    <div>Div2</div>
</div>

p元素的内容（“These are the necessary step“）将被选中。

:last-of-type | 选择指定类型的最后一个子元素

与:first-of-type相同，但这将影响相同类型的最后一个子元素。

.innerDiv p:last-of-type {
    color: orangered;
}

这将适用于类型为p段落元素的innerDiv类的最后一个子元素。

<div class="innerDiv">
    <p>These are the necessary steps</p>
    <p>hiya</p>
    <div>Div1</div>
    <p>
        Do the same.
    </p>
    <div>Div2</div>
</div>

因此，p元素的内容（“Do the same”）将被选中。

:nth-of-type() | 选择指定类型的子元素

这个选择器将从指定父元素的列表中选择某个类型的元素。

.innerDiv p:nth-of-type(1) {
    color: orangered;
}

:th-last-of-type() | 在列表末尾选择类型的子元素

这将选择某个类型的最后一个子元素。

.innerDiv p:nth-last-of-type() {
    color: orangered;
}

这将选择innerDiv类中包含的类型为p段落元素的列表中的最后一个子元素。

<div class="innerDiv">
    <p>These are the necessary steps</p>
    <p>hiya</p>
    <div>Div1</div>
    <p>
        Do the same.
    </p>
    <div>Div2</div>
</div>

p元素的作用与innerDiv类中的最后一段子元素相同，因此它将被选中并受到CSS规则的影响。

:link | 选择一个未访问的超链接

此选择器适用于尚未访问的链接。这通常与带有href属性的锚伪类一起使用。

a:link {
    color: orangered;
}
<a href="/login">Login<a>

这将使所有具有href属性的锚伪类（尚未单击以访问其href属性中的页面）具有橙色的文本。

:checked | 选择一个选中的复选框

这适用于已选中的复选框。

input:checked {
    border: 2px solid lightcoral;
}

此规则适用于所有已被单击以选中它的复选框。

:valid | 选择一个有效的元素

这主要用于表单中可视化通过用户设置验证的表单元素。当验证通过时，将使用valid属性设置默认元素。

input:valid {
    boder-color: lightsalmon;
}

:invalid | 选择一个无效的元素

与:valid相同，但这将应用于验证测试失败的元素。

input[type="text"]:invalid {
    border-color: red;
}

:lang() | 通过指定的lang值选择一个元素

这适用于指定了其语言的元素。

它可以通过以下两种方式来设置：

p:lang(fr) {
    background: yellow;
}


/* OR */
p[lang|="fr"] {
    background: yellow;
}
<p lang="fr">Paragraph 1</p>

:not() | 取反选择（这是一个运算符）

此选择器匹配每个元素是不是指定的元素/选择器。

我们来看一个例子：

.innerDiv :not(p) {
    color: lightcoral;
}
<div class="innerDiv">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <div>Div 1</div>
    <p>Paragraph 3</p>
    <div>Div 2</div>
</div>

将选择Div1标签和Div2标签，因为它们不是p元素。

总结

以上列举常用的伪类选择器，伪选择器还有更多，但是它们不是标准的，因此我省略了它们。