CSS 伪类（Pseudo-class）是一种用于选择特定状态下的元素的选择器，它不会修改 HTML 结构，而是根据元素的状态来应用不同的样式。
伪类以 : 开头，例如 :hover、:nth-child() 等。
常见的 CSS 伪类
1. 用户交互相关
| 伪类 |
作用 |
:hover |
当鼠标悬停在元素上时应用样式 |
:active |
当元素被点击（激活）时应用样式 |
:focus |
当元素获取焦点（如输入框被点击）时应用样式 |
:focus-visible |
仅当元素通过键盘或某些输入方式获得焦点时生效 |
button:hover {
background-color: lightblue;
}
input:focus {
border: 2px solid blue;
}
2. 结构相关
| 伪类 |
作用 |
:first-child |
选择属于其父元素的第一个子元素 |
:last-child |
选择属于其父元素的最后一个子元素 |
:nth-child(n) |
选择父元素的第 n 个子元素（从 1 开始计数） |
:nth-of-type(n) |
选择特定类型的第 n 个元素 |
:only-child |
选择唯一的子元素 |
:empty |
选择没有子元素的元素（包括文本节点） |
p:first-child {
color: red;
}
li:nth-child(odd) {
background-color: lightgray;
}
p:only-child {
font-weight: bold;
}
这里 :empty 最经典的一个用法就是对于 antd table 支持 cell 为空时添加 - 兜底展示：
.ant-table-cell:empty:after,
.ant-table-cell span:empty:after {
content: "-";
}
3. 表单相关
| 伪类 |
作用 |
:checked |
选中复选框（checkbox）或单选框（radio）时生效 |
:disabled |
选中禁用状态的表单元素 |
:enabled |
选中可用状态的表单元素 |
:required |
选中必填的输入框 |
:valid / :invalid |
用于验证表单输入是否合法 |
input:checked {
outline: 2px solid green;
}
input:disabled {
background-color: lightgray;
}
4. 其他常用伪类
| 伪类 |
作用 |
:not(selector) |
选中不匹配 selector 的元素 |
:has(selector) |
选中包含某个子元素的父级（现代浏览器支持） |
:is(selector1, selector2) |
选择符合任意一个 selector 的元素 |
:where(selector) |
类似 :is()，但无优先级影响 |
button:not(.disabled) {
background-color: blue;
}
div:has(img) {
border: 2px solid red;
}
:is(h1, h2) {
font-size: 20px;
}
伪类 vs 伪元素
- 伪类（Pseudo-class）：基于元素的状态应用样式（
:hover、:nth-child()）。
- 伪元素（Pseudo-element）：用于创建或选中特定部分的元素（
::before、::after）。
总结
- 伪类以
: 开头，主要用于元素状态的变化（:hover、:checked）。
- 结构相关的伪类用于选择特定子元素（
:first-child、:nth-child(n)）。
:not() 和 :has() 提供更灵活的选择器控制能力。
