这些有用的CSS伪类通常被忽略
这些有用的CSS伪类通常被忽略
这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的JavaScript。
::first-line 选择文本的第一行
这个选择器用于选取指定选择器的首行。如有如下HTML
<body>
<h1>做工程师不做码农</h1>
<p>如果对你有所启发和帮助，可以点个关注、收藏、转发，也可以留言讨论，这是对作者的最大鼓励。
作者简介：Web前端工程师，全栈开发工程师、持续学习者。
私信回复：大礼包，送某网精品视频课程网盘资料，准能为你节省不少钱！</p>
</body>css
p:first-line {
color: lightcoral;
}效果
::first-letter 选择第一个字母
该伪选择器适用于元素中文本的第一个字母。有如下代码
<body>
<h1>做工程师不做码农</h1>
<p>我的网络ID叫Dunizb</p>
<p>zuo gong cheng shi bu zuo ma nong</p>
<p>My best friend is Mickey</p>
</body>.innerDiv p:first-letter {
color: lightcoral;
font-size: 40px
}效果
::selection 选择高亮的(选中的)区域
这个很好理解，就是平常我们鼠标选中文本时的样式。
使用 ::selection 伪类选择器，我们可以将样式应用于突出显示的区域。
div::selection {
color: yellow;
background: red;
}上面的代码的效果就是：
:root 根元素
:root 伪类选择了文档的根元素。在HTML中，它始终是HTML元素。在RSS中，它是RSS元素。
这个伪选择器最常用于使用CSS变量来存储全局规则值，因为它适用于根元素。
:empty 匹配空项目
该伪选择器将选择没有任何子项的任何元素，元素必须为空。如果元素没有空格、可见内容或子代元素，则该元素为空。
div:empty {
border: 2px solid orange;
}
<div></div>
<div></div>
<div>
</div>该规则将适用于空的div元素。该规则将适用于第一个和第二个div，因为它们确实是空的，而不是第三个div，因为它有空格。
关于 :empty 的更多详细使用技巧，强烈推荐下面这篇文章
推荐阅读：拒绝JavaScript，这三个CSS技巧你一定用的上
:only-child 选择唯一的子元素
选择器匹配属于其父元素的唯一子元素的每个元素。看如下HTML
<div>
<p>这是一个段落。</p>
</div>
<div>
<span>这是一个 span。</span>
<p>这是一个段落。</p>
</div>
<p><b>注释：</b>Internet Explorer 不支持 :only-child 选择器。</p>p:only-child {
background:#ff0000;
}效果如下
:first-of-type 选择指定类型的第一个子元素
与 :first-of-type 相同，但这会影响相同类型的最后一个子元素。
:nth-of-type(n) 选择指定类型的子元素
该选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。
n 可以是数字、关键词或公式。
<style>
p:nth-of-type(3n+0) {
background:#ff0000;
}
</style>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>
</body>
:nth-last-of-type() 选择器相同，只是从最后一个子元素开始计数。
:link 选择一个未访问的超链接
此选择器适用于尚未访问的链接，这通常与带有 href 属性的 a 锚元素一起使用。
a:link {
color: orangered;
}
<a href="/login">Login<a>这将使所有具有href属性的锚元素（尚未单击以访问其href属性中的页面）具有橙色的文本。
:checked 选择一个选中的复选框
如下所示，将匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。
input:checked {
border: 2px solid lightcoral;
}
<form action="">
<input type="radio" checked="checked" value="male" name="gender" /> 选中的单选框<br>
<input type="radio" value="female" name="gender" /> 单选框<br>
<input type="checkbox" checked="checked" value="Bike" /> 选中的复选框<br>
<input type="checkbox" value="Car" /> 复选框
</form>该规则适用于所有已单击以选中它的复选框。
不过这个选择器兼容性太差，只有 Opera 支持。
:valid 选择有效的元素
这主要用于表单中的可视化表单元素，通过用户设置的验证。当验证通过时，将使用 valid 属性设置默认元素。
input:valid {
boder-color: lightsalmon;
}:invalid 选择一个无效的元素
与 :valid 相同，但这将适用于未通过验证测试的元素。
input[type="text"]:invalid {
border-color: red;
}:lang() 通过指定的lang值选择一个元素
这适用于指定了语言的元素，可以通过以下两种方式进行设置：
p:lang(fr) {
background: yellow;
}或者
p[lang|="fr"] {
background: yellow;
}
<p lang="fr">段落 1</p>:not() 取反
一个否定伪选择器选择非的东西，让我们来看一个例子：
.innerDiv :not(p) {
color: lightcoral;
}
<div class="innerDiv">
<p>段落 1</p>
<p>段落 2</p>
<div>Div 1</div>
<p>段落 3</p>
<div>Div 2</div>
</div>将选择 Div 1 和 Div 2，因为它们不是 p 元素。
