伪类选择器
在CSS中有众多选择器,其中伪类选择器是比较让人头疼,同时亦让人弄混的选择器,本篇博客主要对常用的伪类选择器进行简单的总结。
什么是伪类?
CSS伪类用于向某些选择器添加特殊的效果。
它的语法结构为:
selector : pseudo-class {
property: value
}
下面是几个常用的伪类选择器介绍
一. 动态伪类
常用在网页的交互效果方面,例如导航标签的悬浮变色,通过使用动态伪类是非常常用的网页动态交互方式,另外也常用在a 链接标签中。
动态伪类包含以下几种:
- link 还未被访问的链接
- visited 已经访问的链接
- hover 鼠标悬浮在元素上的效果
- active 鼠标点中元素一瞬间的效果
1. link
例如当链接没有点击时,设a标签文字为黑色:
a:link{
color:black;
}
2. visited
例如当链接已经点击时,设a标签文字变为绿色
a:visited {
color: green;
}
3. hover
例如鼠标悬浮在a标签上时,文字变为红色
a:hover{
color: red;
}
4. active
例如鼠标点击的一瞬间背景颜色变为蓝色
a:active{
background-color: blue;
}
注意:如果是a标签使用以上选择器,顺序不可变
二.结构类
这类选择器通常是用来定位匹配某些元素,这类的选择器也是比较容易混淆以及拿捏不准的选择器。
此类选择器包括以下几种:
- :empty
- :first-child
- :first-of-type
- :last-child
- :last-of-type
- :not()
- :nth-child(n)
- :nth-of-type(n)
- :nth-last-child(n)
- :nth-last-of-type(n)
- :only-child
- :only-of-type
1.first和last类
:first-child
所有父标签的第一个子元素如果是某元素,则被选中。
例:
所有父标签的第一个子元素如果是p标签,则选中此标签,设置背景为粉色
p:first-child{
background-color: pink;
}
:first-of-type
所有父标签中某元素的第一个子元素。
例:
所有父标签中的第一个p标签,文字设置为红色
p:first-of-type{
color: red;
}
:last-child
所有父标签的最后一个子元素如果是某元素,则被选中。
例:
所有父标签中的最后一个子元素,如果是p 标签则选中,背景颜色设置为绿色
p:last-child{
background-color: green;
}
:last-of-type
所有父标签中某元素的最后一个子元素。
例:
所有父标签中的最后一个p标签,文字设置为橙色
p:last-of-type{
color: orange;
}
2.nth类
:last-of-type(n)
所有父标签中第n个元素如果是某元素,则被选中
例:
所有父标签中第二个元素,如果是p标签,则被选中
p:nth-child(2){
color: red;
}
:nth-of-type(n)
所有父标签中第n个某元素
例:
所有父标签中第二个p标签
p:nth-of-type(2){
color: green;
}
:nth-last-child(n)
所有父标签中倒数第n个元素如果是某元素,则被选中
例:
所有父标签中倒数第一个元素如果是p标签,择选中
p:nth-last-child(1){
background-color: pink;
}
:nth-last-of-type(n)
所有父标签中倒数第n个某标签
例:
所有父标签中倒数第二个p标签
p:nth-last-of-type(2){
background-color: blue;
}
3.only类
:only-child
父标签中只有一个标签,并且是某标签才会被选中
例:
父标签中只有一个子标签并且是p标签
p:only-child{
background-color: yellow;
}
:only-of-type
所有父标签只有一个某标签时才会被选中
例:
所有父标签只有一个p标签,才会被选中
p:only-of-type{
color: red;
}
4.empty类
:empty
选择器匹配没有子元素(包括文本节点)的每个元素
例:
选择没有子元素的p标签
p:empty{
width: 200px;
height: 100px;
background-color: greenyellow;
}
5.not类
:not
选择器匹配非指定元素/选择器的每个元素 (不是这个元素的其他元素)
例:
选择类名不是color的其他元素
:not(.color){
olor: pink;
}
三.状态伪类
此类通常结合form表单和input中的属性使用,大多用来获取或者判断标签当前的状态 ,
此类包括以下这些:
- :focus 获得焦点的时候
- :disabled 不可选的
- :enabled 可选的
- :in-range 值在指定区间内
- :out-of-range 值超出区间
- :optional 元素可选时,无必须填写属性
- :required 必须填写项
- :read-only 只读
- :read-write 读写
- :valid 输入值有效,符合要求
- :invalid 输入值无效 ,不符合要求
状态伪类比较多,理解起来也比较简单,这里就不再复述了,具体用法请点击查看以下两个例子:
点击我查看 :focus 至 :out-of-range 的效果
点击我查看 :optional 至 :invalid 的效果
提醒:因为各伪类的作用可能有相互的影响,可以选择注释掉一部分选择器方便查看理解