前端：巧用CSS伪类，提升布局效率 _CSS伪类

css 伪类是用于向某些选择器添加特殊的效果，是动态的，指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
接下来介绍一些大家可能还不熟悉的一些伪类及其用例，希望对大家日后有所帮助。
:first-child
选择器匹配其父元素中的第一个子元素。
<!DOCTYPE html><html lang="en"><head><style>.skills li:first-child {color: red;}</style></head><body><ul class="skills"><li>我要学英语</li><li>我要买汽车</li><li>我要买房子</li><li>我要当老板</li></ul></body></html>

文章插图

:last-child
用于匹配父元素中最后一个子元素

<!DOCTYPE html><html lang="en"><head><style>.skills li:last-child {color: #fff;background-color: blue;}</style></head><body><ul class="skills"><li>我要学英语</li><li>我要买汽车</li><li>我要买房子</li><li>我要当老板</li></ul></body></html>

文章插图

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

<!DOCTYPE html><html lang="en"><head><style>article {width: 20em;}article::first-line {color: red;}</style></head><body><article>岁月悠悠，来去匆匆 。情似水，远赴湖海 。破碎如镜，就只能将裂痕永远留下不堪的痕迹 。你匆匆的来，就这样匆匆的远去 。匆匆的片刻，匆匆的别离，留下我一腔的破碎情愁，在记忆的深处随岁月的变迁而悸动疼痛 。</article></body></html>

文章插图

::first-letter
选择这一行的第一个字 CSS 伪元素 ::first-letter会选中某块级元素第一行的第一个字母。

<!DOCTYPE html><html lang="en"><head><style>article {width: 20em;}article::first-letter {color: red;font-size: 30;font-weight: bold;}</style></head><body><article>岁月悠悠，来去匆匆 。情似水，远赴湖海 。破碎如镜，就只能将裂痕永远留下不堪的痕迹 。你匆匆的来，就这样匆匆的远去 。匆匆的片刻，匆匆的别离，留下我一腔的破碎情愁，在记忆的深处随岁月的变迁而悸动疼痛 。</article></body></html>

文章插图

::selection
::selection 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。
article {width: 20em;font-size: 24px;}article::selection {color: red;}

文章插图

:root
:root 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 `<html>` 元素，除了优先级更高之外，与 html 选择器相同。在声明全局 CSS 变量时 :root 会很有用：
:root {--main-color: red;--pane-padding: 5px 42px;}:empty
:empty 伪类代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）,注释或处理指令都不会产生影响。

<!DOCTYPE html><html lang="en"><head><style>div:empty {height: 50px;background-color: blue;}</style></head><body><div></div><div>第二个div</div><div>第三个div</div></body></html>

文章插图

:empty伪类仅作用于第一个div因为它的内容是空的。
:only-child
:only-child 匹配没有任何兄弟元素的元素.等效的选择器还可以写成:first-child、:last-child、:nth-child(1)、:nth-last-child(1),当然,前者的权重会低一点。

<!DOCTYPE html><html lang="en"><head><style>div:only-child {color: white;background-color: blue;}</style></head><body><div><div>我没兄弟</div></div><div>第二个div</div><div>第三个div</div></body></html>