你可能会错过的 CSS 伪类

该规则将适用于空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 以及类型为段落元素的列表中的最后一个子元素。

结论

伪选择器其实还有很多，但是它们不是常用的，因此就没一一列举介绍它们。
最后非常感谢收看，一起遨游知识的海洋 😊😊

参考文献

• CSS：权威指南— Eric A. Meyer，Estelle Weyl