前端：巧用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>
:first-of-type
:first-of-type表示一组兄弟元素中其类型的第一个元素。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div:first-of-type {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div>第一个div</div>
<div>第二个div</div>
<div>第三个div</div>
</body>
</html>
:last-of-type
选择指定类型的最后一个子元素
:last-of-type CSS 伪类 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。
// 最后一个元素的背景色为绿色，文字颜色为白色
div:last-of-type {
color: white;
background-color: green;
}
nth-of-type()
选择指定类型的子元素
:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。
// 第二个元素的背景颜色为橘色，文字颜色为白色
div:nth-of-type(2) {
color: white;
background-color: orange;
}
:nth-last-of-type()
在列表末尾选择类型的子元素
:nth-last-of-type(an+b) 这个 CSS 伪类 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值。它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处。
// 倒数第二个元素背景颜色为橘色、文字颜色为白色
div:nth-last-of-type(2) {
color: white;
background-color: orange;
}
:link
选择一个未访问的超链接
:link伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如:hover选择器，:active选择器，:visited选择器）。
为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active。:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
a:link {
color: orangered;
}
</style>
</head>
<body>
<a href="https://www.toutiao.com/">今日头条</a>
<br/>
<a href="www.baidu.com">百度一下</a>
</body>
</html>
a标签的:link 伪类对未访问的连接颜色为橘色 ，“今日头条”我已经访问了，颜色切换为了常见的蓝色，“百度一下”未访问文字颜色还是橘色的。
:checked
选择一个选中的复选框
:checked CSS 伪类选择器表示任何处于选中状态的radio(`<input type="radio">`), checkbox (`<input type="checkbox">`) 或("select") 元素中的option HTML元素("option")。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
input:checked {
box-shadow: 0 0 0 3px red;
}
</style>
</head>
<body>
<input type="checkbox" />
</body>
</html>
:valid
选择一个有效的元素
:valid CSS 伪类表示内容验证正确的`<input>` 或其他 `<form>` 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。
:invalid
选择一个无效的元素
:invalid CSS 伪类 表示任意内容未通过验证的 `<input>` 或其他 `<form>` 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
input {
font-size: 18px;
outline: none !important;
}
/* 有效时颜色、边框为绿色 */
input:valid {
color: green;
border: 2px solid green;
}
/* 无效时颜色、边框为红色 */
input:invalid {
color: red !important;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="email">
</body>
</html>
:lang()
通过指定的lang值选择一个元素
:lang() CSS 伪类基于元素语言来匹配页面元素。通过html的lang属性设置
<!DOCTYPE html>
<html lang="en"> // 当前html为英文
<head>
<style>
div:lang(en) { // 语言是英文的时候设置文字颜色为红色
color: red;
}
</style>
</head>
<body>
<div>my name is susu</div>
<div>我的名字叫苏蘇</div>
</body>
</html>
:not()
用来匹配不符合一组选择器的元素
CSS 伪类 :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
font-size: 18px;
}
.main :not(p) {
/* 不是p标签的文字颜色都是红色 */
color: red;
}
</style>
</head>
<body>
<div class="main">
<div>我是第一个div</div>
<div>我是第二个div</div>
<p>我是一个p</p>
<p>我也是个p</p>
<p>我不是个p也不行啊，有p包着呢</p>
</div>
</body>
</html>
如果这篇文章能帮到您，请您点点赞、点拨关注，感激不尽，如果您有前端方面的疑惑请在评论区留言。
