伪类选择器简单总结

伪类选择器

---

在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 的效果
提醒：因为各伪类的作用可能有相互的影响，可以选择注释掉一部分选择器方便查看理解