WHAT - CSS 伪类

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()，但无优先级影响

/* 选择所有不是 .disabled 的按钮 */
button:not(.disabled) {background-color: blue;
}/* 选择所有包含 <img> 的 <div> */
div:has(img) {border: 2px solid red;
}/* 选择 <h1> 或 <h2> */
: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() 提供更灵活的选择器控制能力。