1、:hover
鼠标悬停在标签上方时触发hover样式,适用于所有标签
2、:active
鼠标点击标签未松开时触发active样式,适用于所有标签
3、:checked
当标签被选中时触发checked样式,适用于radio(单选按钮),checkbox(复选框),或者option(select中的一项)
4、:focus
当标签获得焦点时触发focus样式,适用于input、button
5、:focus-within
当标签获得焦点或该标签的后代标签获得焦点时触发此样式,适用于后代标签是input标签、button标签的标签
6、::placeholder
设置占位符中字体的样式
iuput::placeholder{
font-size:14px
}
7、:first-child
表示在一组兄弟标签中的第一个标签
:first-child
表示在一组兄弟标签中的最后一个标签
例如:
div p:first-child{
color: red;
}
div p:first-child{
color: blue;
}
<div>
<p>1111111</p>
<p>2222222</p>
<p>3333333</p>
<p>4444444</p>
<p>5555555</p>
</div>
8、:nth-child(an+b)
a和b是自己定义的整数,(n=0,1,2,3...)
表示匹配an+b行
:nth-child(odd)
表示匹配奇数行
:nth-child(even)
表示匹配偶数行
:nth-child(-n+3)
表示匹配前三个标签
:nth-child(2)
表示匹配第二个标签
9、p:first-of-type
选择类型是p标签的第一个p标签
p:last-of-type
选择类型是p标签的最后一个p标签
例如:
div p:first-of-type{
color: red;
}
div p:last-of-type{
color: blue;
}
<div>
<p>1111111</p>
<b>2222222</b>
<p>3333333</p>
<i>4444444</i>
<p>5555555</p>
<span>66666666666</span>
</div>
10、p:nth-of-type(an+b)
a和b是自己定义的整数,(n=0,1,2,3...)
表示匹配类型是p标签的第an+b行