CSS伪类(Pseudo-classes)完全指南
用大白话解释CSS伪类概念、用法和实际应用场景
什么是CSS伪类？
伪类（Pseudo-class）是CSS中的特殊关键字，用于选中HTML元素的特定状态或特殊位置。
💡 简单理解：伪类就像给你的元素添加了一个”临时标签”，当元素处于特定状态（比如鼠标悬停）或处于特定位置（比如列表中的第一个元素）时，这个”临时标签”就会被激活，从而应用特殊样式。
伪类的语法很简单，由选择器后面加上冒号(:)和伪类名称组成：
selector:pseudo-class {
property: value;
}
例如：
/* 当鼠标悬停在按钮上时改变背景色 */
.my-button:hover {
background-color: #3498db;
}
.my-button:hover {
background-color: #3498db;
}
1. 链接状态伪类
2. 用户交互伪类
这些伪类响应用户的交互行为：
- :hover – 鼠标悬停在元素上
- :active – 元素被激活（如按钮被按下）
- :focus – 元素获得焦点（如表单输入）
- :focus-within – 包含获得焦点的元素的元素
点击下面的输入框查看效果：
:focus-within 演示
3. 结构伪类
根据元素在DOM树中的位置选择元素：
- :first-child – 一组兄弟元素中的第一个
- :last-child – 一组兄弟元素中的最后一个
- :nth-child(n) – 一组兄弟元素中的第n个
- :nth-last-child(n) – 倒着数的第n个
- :only-child – 没有兄弟元素的元素
列表项样式：
- 第一个元素 – :first-child
- 第二个元素
- 第三个元素 – :nth-child(3)
- 第四个元素
- 第五个元素 – :nth-child(2n)
- 第六个元素 – :nth-child(2n)
- 最后一个元素 – :last-child
4. 表单相关伪类
专门用于表单元素的伪类：
- :checked – 选中的复选框或单选按钮
- :disabled – 禁用的表单元素
- :enabled – 启用的表单元素
- :required – 必填的表单元素
- :optional – 非必填的表单元素
- :valid – 输入值有效的元素
- :invalid – 输入值无效的元素
5. 其他常用伪类
其他非常有用的伪类：
- :not(selector) – 选择不匹配给定选择器的元素
- :target – 当前活动的锚点目标元素
- :root – 文档的根元素（html元素）
- :lang(language) – 基于元素语言的元素
:not() 演示
普通段落
特殊段落（没有应用:not）
另一个普通段落
:lang() 演示
This is an English paragraph.
这是中文段落效果演示
:target 演示
点击下面的链接激活该区域：
激活:target效果
激活:target效果
6. 伪类的组合使用
伪类可以组合使用以实现更精确的选择：
/* 表格中除了第一行之外的奇数行 */
tr:not(:first-child):nth-child(odd) {
background-color: #f9f9f9;
}
tr:not(:first-child):nth-child(odd) {
background-color: #f9f9f9;
}
/* 获得焦点的必填输入框 */
input:required:focus {
border-color: #ff9800;
}
input:required:focus {
border-color: #ff9800;
}
/* 禁用的按钮上的鼠标悬停效果 */
button:disabled:hover {
cursor: not-allowed;
}
button:disabled:hover {
cursor: not-allowed;
}
💡 专业提示：组合伪类时，多个伪类可以连续写在同一个选择器后面（例如 input:focus:required）