CSS选择器-伪类选择器

约 892 字大约 3 分钟

2025-10-15

伪类选择器选择元素的特定状态或结构位置，符号是冒号(:)

语法为：

选择器:伪类 {
    样式规则;
}

伪类也可以组合使用，如 a:hover:focus

用户行为伪类

`:hover`

应用场景：
鼠标经过元素时的样式变化
细节优化
- 果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用）
- 通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏设备，智能电视），可通过增加focus伪类来优化（使用Tab键来聚焦目标元素触发之前的hover对应的效果）
注意事项：
:hover不适用于移动端，虽然也能触发，但消失并不敏捷，体验反而奇怪。

`:active`

selector:active 表示匹配激活状态的 selector 选择器元素（通过鼠标点击或触屏触摸的过程中触发样式，结束后还原样式），支持任意html元素。

应用场景：链接和按钮点击过程中的样式设置

`:focus`

selector:focus 表示用户通过Tab导航聚焦到selector选择器元素时触发。

有效范围：
- 非disabled状态的表单元素（包括input，select和button元素）
- 含有href属性的a元素
- area和summary元素
应用场景：
常用于表单元素聚焦时的边框高亮显示
注意事项：
使用:focus来修改按钮的样式时，建议按钮就用button元素，而非span或div标签模拟的按钮。因为考虑到纯键盘无鼠标的场景,button元素可以通过键盘Tab触发聚焦，而span或div元素不行

`:focus-within`

selector:focus-within 表示当前selector选择器元素或者其子元素聚焦时都会匹配（:focus只会匹配对应元素本身）。说明子元素聚焦可以让父元素的样式变化

应用场景：
用于表单form或列表元素中设置子表单或子元素的一些通用样式

超链接伪类

超链接标签<a>的伪类,常见有：

链接伪类	作用
`a:link`	未点击链接的样式
`a:visited`	已点击链接的样式
`a:hover`	鼠标悬停在链接上时的样式
`a:focus`	通过Tab键获得焦点的链接样式
`a:active`	链接被点击时的瞬时状态(按下未松开)

<a>标签的伪类有顺序规则(LVHA顺序)：

a:link -> a:visited -> a:hover -> a:focus -> a:active

结构伪类

根据元素的位置选择目标元素、

使用场景：
选择第一个或者最后一个或者第n个元素

结构伪类	作用
`:first-child`	一组兄弟元素中的第一个元素
`:last-child`	一组兄弟元素中的最后一个元素
`:nth-child(n)`	一组兄弟元素列表中的第n个元素

:nth-child(n) 中 n 的取值从0开始计算

表单元素伪类

针对表单元素的状态。

使用场景：
表单按钮禁用的时候，调整按钮颜色。

使用示例：

style.css

button {
  width: 150px;
  height: 40px;
  background-color: #ff6900;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
}

button:disabled {
  opacity: 0.4;
}

index.html

<body>
  <input type="checkbox" id="agree">
  <label for="agree">同意注册协议</label>
  <br>
  <button disabled>登录</button>
</body>