这些CSS伪类，你可能不知道，还能用！

作者：ChidumeNnamdi译者：前端小智来源：mediumumcss伪类用于给一些选择器添加特效。它们是动态的，指的是当前元素的状态或特征。只有当一个元素达到某种状态时，它才有可能获得伪类样式；当状态改变时，它会再次失去这种风格。这篇文章在一定程度上鼓励您在构建UI时使用更简单的CSS和更少的JS。熟悉CSS必须提供的所有功能是实现此目标的一种方法，另一种方法是实施最佳实践并尽可能多地重用代码。接下来，我将介绍一些你可能不熟悉的伪类及其用例，希望对你以后有所帮助。::一线|选择文本的第一行::first-line伪元素将样式应用于块级元素的第一行。第一行的长度取决于很多因素，包括元素宽度、文档宽度和文本的文本大小。::first-line伪元素只能用在block容器中，所以::first-line伪元素只能用在block、inline-block、table-cell或table-caption的显示值中。在其他类型中，::first-line无效。用法如下：p:first-line{color:lightcoral;}::first-letter|选择这一行的第一个单词CSS伪元素::first-letter将选择块级元素第一行的第一个字母。用法如下：

前端小智，继续努力，终身学习者！

::选择|用户突出显示的部分::selection伪元素适用于文档中用户突出显示的部分（例如，用鼠标或其他选择设备选择）。div::选择{颜色：#409EFF;}：根|根元素：根伪类匹配文档树的根元素。对于HTML，:root代表元素，与html选择器相同，只是具有更高的优先级。:root在声明全局CSS变量时很有用：:root{--main-color:hotpink;--pane-padding:5px42px;}:empty|仅在子元素为空时有效：empty伪类表示没有子元素的元素。子元素只能是元素节点或文本（包括空格），注释或处理指令无效。div:empty{border:2px纯橙色;margin-bottom:10px;只有第一个和第二个div有效，因为它们确实是空的，所以第三个div没有效果，因为它有一个换行符。：独生子女|只有一个子元素有效：only-child匹配没有任何兄弟元素的元素。等价的选择器也可以写成：first-child:last-child或者:nth-child(1):nth-last-child(1)，当然前者的权重会低一些。p:only-child{background:#409EFF;}：首创|选择指定类型的第一个子元素：first-of-type表示在一组兄弟元素中其类型的第一个元素。.innerDivp:first-of-type{color:orangered;}上面的意思是将.innerDiv中第一个元素p的颜色设置为橙色。

Div1

这些是必要的步骤

hiya

不要不推踩油门的同时刹车。

Div2