这些有用的CSS伪类通常被忽略

这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的JavaScript。

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

这个选择器用于选取指定选择器的首行。如有如下HTML

<code>
<
body
>

  
<
h1
>
做工程师不做码农
h1
>

  
<
p
>
如果对你有所启发和帮助，可以点个关注、收藏、转发，也可以留言讨论，这是对作者的最大鼓励。
  作者简介：Web前端工程师，全栈开发工程师、持续学习者。
  私信回复：大礼包，送某网精品视频课程网盘资料，准能为你节省不少钱！
p
>

body
>
/<code>

css

<code> 
p
:first-line
 {
  
color
: lightcoral;
}/<code>

效果

::first-letter 选择第一个字母

该伪选择器适用于元素中文本的第一个字母。有如下代码

<code>
<
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
>
/<code>

<code>
.innerDiv
 
p
:first-letter
 {
  
color
: lightcoral;
  
font-size
: 
40px
}/<code>

效果

::selection 选择高亮的(选中的)区域

这个很好理解，就是平常我们鼠标选中文本时的样式。

使用 ::selection 伪类选择器，我们可以将样式应用于突出显示的区域。

<code>
div
::selection
 {
  
color
: yellow;
  
background
: red;
}/<code>

上面的代码的效果就是：

:root 根元素

:root 伪类选择了文档的根元素。在HTML中，它始终是HTML元素。在RSS中，它是RSS元素。

这个伪选择器最常用于使用CSS变量来存储全局规则值，因为它适用于根元素。

:empty 匹配空项目

该伪选择器将选择没有任何子项的任何元素，元素必须为空。如果元素没有空格、可见内容或子代元素，则该元素为空。

<code>div:empty {
  border: 2px solid orange;
}
<
div
>
div
>

<
div
>
div
>

< 
div
>

div
>
/<code>

该规则将适用于空的div元素。该规则将适用于第一个和第二个div，因为它们确实是空的，而不是第三个div，因为它有空格。

关于 :empty 的更多详细使用技巧，强烈推荐下面这篇文章

推荐阅读：拒绝JavaScript，这三个CSS技巧你一定用的上​

:only-child 选择唯一的子元素

选择器匹配属于其父元素的唯一子元素的每个元素。看如下HTML

<code>
<
div
>

  
<
p
>
这是一个段落。
p
> 

div
>


<
div
>

  
<
span
>
这是一个 span。
span
>

  
<
p
>
这是一个段落。
p
>

div
>


<
p
>
<
b
>
注释：
b
>
Internet Explorer 不支持 :only-child 选择器。
p 
>
/<code>

<code>
p
:only-child
 {
	
background
:
#ff0000
;
}/<code>

效果如下

:first-of-type 选择指定类型的第一个子元素

与 :first-of-type 相同，但这会影响相同类型的最后一个子元素。

:nth-of-type(n) 选择指定类型的子元素

该选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。

n 可以是数字、关键词或公式。

<code>
<
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
>
/<code>

:nth-last-of-type() 选择器相同，只是从最后一个子元素开始计数。

:link 选择一个未访问的超链接

此选择器适用于尚未访问的链接，这通常与带有 href 属性的 a 锚元素一起使用。

<code>a:link {
	color: orangered;
}
<
a
 
href
=
"/login"
>
Login
<
a
>
/<code>

这将使所有具有href属性的锚元素（尚未单击以访问其href属性中的页面）具有橙色的文本。

:checked 选择一个选中的复选框

如下所示，将匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。

<code>
input
:checked {
  border:  
2
px solid lightcoral;
}
"">
  <
input
 
type
=
"radio"
 checked=
"checked"
 value=
"male"
 name=
"gender"
 /> 选中的单选框

  <
input
 
type
=
"radio"
 value=
"female"
 name=
"gender"
 /> 单选框

  <
input
 
type
=
"checkbox"
 checked=
"checked"
 value=
"Bike"
 /> 选中的复选框

  <
input
 
type
=
"checkbox"
 value=
"Car"
 /> 复选框 
/<code> 

该规则适用于所有已单击以选中它的复选框。

不过这个选择器兼容性太差，只有 Opera 支持。

:valid 选择有效的元素

这主要用于表单中的可视化表单元素，通过用户设置的验证。当验证通过时，将使用 valid 属性设置默认元素。

<code>
input
:valid
 {
  
boder-color
: lightsalmon;
}/<code>

:invalid 选择一个无效的元素

与 :valid 相同，但这将适用于未通过验证测试的元素。

<code>
input
[type=
"text"
]
:invalid
 {
  
border-color
: red;
}/<code>

:lang() 通过指定的lang值选择一个元素

这适用于指定了语言的元素，可以通过以下两种方式进行设置：

<code>
p
:lang(fr)
 {
  
background
: yellow;
}/<code>

或者

<code>p[lang|="fr"] {
  background: yellow;
}
<
p
 
lang
=
"fr"
>
段落 1
p
>
/<code>

:not() 取反

一个否定伪选择器选择非的东西，让我们来看一个例子：

<code>.innerDiv :not(p) {
	
color
: lightcoral;
}
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 元素。
如果对你有所启发和帮助，可以点个关注、收藏、转发，也可以留言讨论，这是对作者的最大鼓励。
作者简介：Web前端工程师，全栈开发工程师、持续学习者。
私信回复：大礼包，送某网精品视频课程网盘资料，准能为你节省不少钱！
收藏
举报
 
杭州程序员小张/<code>