摘要：CSS 伪类是为元素添加特殊状态样式的核心工具，它无需额外 HTML 标签，就能实现元素的 hover 交互、表单校验、列表奇偶渲染等效果。本文系统梳理伪类的分类、常用场景及高级技巧，结合实战案例帮你夯实 CSS 功底，写出更简洁、易维护的样式代码。
一、什么是 CSS 伪类
伪类（Pseudo-class）是 CSS 选择器的一种，用于选择处于特定状态的元素，或选取树结构中的特定位置元素。
它的语法格式为：
css
selector:pseudo-class { property: value; }
伪类的核心优势在于无侵入式样式控制：无需修改 HTML 结构、无需 JS 介入，仅通过 CSS 就能实现动态样式变化。
二、伪类的分类与核心用法
根据作用场景，CSS 伪类可分为 状态伪类、结构伪类、表单伪类 三大类，覆盖前端开发的绝大多数样式需求。
2.1 状态伪类：控制元素的动态交互状态
状态伪类针对元素的用户交互状态，是最常用的伪类类型，常用于按钮、链接、表单等元素的样式控制。
伪类 作用 实战场景 :hover 鼠标悬停在元素上时触发 按钮悬浮变色、导航栏下拉菜单 :active 元素被激活时触发（鼠标按下未松开） 按钮点击反馈、防止重复点击的视觉提示 :focus 元素获得焦点时触发 输入框聚焦高亮、键盘导航样式优化 :visited 链接被访问过之后触发 区分已读/未读链接 :link 链接未被访问时触发 初始链接样式设置
实战示例：按钮交互样式
css
.btn { padding: 8px 16px; border: none; border-radius: 4px; background-color: #4285F4; color: #999; transition: all 0.3s ease; } /* 悬停状态 / .btn:hover { background-color: #3367D6; cursor: pointer; } / 点击激活状态 / .btn:active { background-color: #2556C2; transform: scale(0.98); } / 焦点状态（适配键盘导航） */ .btn:focus { outline: none; box-shadow: 0 0 0 2px #8AB4F8; }
2.2 结构伪类：精准选取 DOM 树中的元素
结构伪类基于 DOM 树的层级结构和位置关系选择元素，极大减少了额外类名的使用，让 CSS 更简洁。
基础结构伪类
- :first-child ：选取父元素的第一个子元素
- :last-child ：选取父元素的最后一个子元素
- :only-child ：选取父元素的唯一子元素
- :nth-child(n) ：选取父元素的第 n 个子元素（ n 支持数字、表达式、关键词）
- :nth-last-child(n) ：从后往前选取父元素的第 n 个子元素
关键说明： n 的取值规则
- 数字： nth-child(3) 选取第 3 个子元素
- 表达式： nth-child(2n) 选取偶数位元素， nth-child(2n+1) 选取奇数位元素
- 关键词： nth-child(even) 偶数位， nth-child(odd) 奇数位
实战示例：列表奇偶行隔行变色
html
- 列表项 1
- 列表项 2
- 列表项 3
- 列表项 4
css
.list li { padding: 10px; border-bottom: 1px solid #eee; } /* 奇数行样式 / .list li:nth-child(odd) { background-color: #f8f9fa; } / 偶数行样式 */ .list li:nth-child(even) { background-color: #ffffff; }
元素类型结构伪类
- :first-of-type ：选取父元素中同类型的第一个元素
- :last-of-type ：选取父元素中同类型的最后一个元素
- :nth-of-type(n) ：选取父元素中同类型的第 n 个元素
区别说明： nth-child vs nth-of-type
- :nth-child 会匹配父元素下所有子元素的位置，再判断是否符合选择器
- :nth-of-type 会先筛选父元素下同类型的子元素，再匹配位置
2.3 表单伪类：优化表单元素的交互与校验
表单伪类专门用于表单元素，可实现输入状态、校验结果的样式控制，提升用户体验。
伪类 作用 实战场景 :enabled 选取可用的表单元素 正常状态的输入框、按钮样式 :disabled 选取禁用的表单元素 禁用按钮的置灰样式、不可输入状态提示 :checked 选取被选中的单选/复选框 自定义单选框、复选框样式 :required 选取必填的表单元素 必填项的红色星号提示 :valid 选取校验通过的表单元素 输入合法时的绿色边框 :invalid 选取校验失败的表单元素 输入非法时的红色边框
实战示例：表单校验样式
html
css
.form input { width: 300px; padding: 8px; margin: 8px 0; border: 1px solid #ddd; border-radius: 4px; } /* 必填项提示 / .form input:required { border-left: 3px solid #ff4444; } / 输入合法 / .form input:valid { border-color: #00C851; } / 输入非法 / .form input:invalid { border-color: #ff4444; } / 禁用状态 */ .form input:disabled { background-color: #f2f2f2; cursor: not-allowed; }
三、伪类的高级用法与技巧
3.1 伪类的组合使用
多个伪类可以组合使用，实现更精准的样式控制。
示例 1：鼠标悬停在未访问的覆盖掘金文章的样式
css
a:link:hover { color: #007fff; text-decoration: underline; }
示例 2：列表最后一个元素的悬停样式
css
.list li:last-child:hover { background-color: #e8f4f8; cursor: pointer; }
3.2 伪类与伪元素的区别
很多开发者会混淆伪类和伪元素，这里明确两者的核心差异：
- 伪类：选择元素的状态或位置，如 :hover :nth-child
- 伪元素：创建元素的虚拟部分，如 ::before ::after （双冒号语法区分）
示例：伪类 + 伪元素 结合使用
css
/* 按钮悬停时显示图标 */ .btn:hover::before { content: "✓"; margin-right: 4px; }
3.3 性能优化注意事项
- 避免过度使用复杂的结构伪类（如多层嵌套的 nth-child ），可能增加浏览器的渲染计算量
- 优先使用 :is() 选择器简化多个伪类的组合，减少选择器的复杂度 css
/* 简化前 / .btn:hover, .btn:focus, .btn:active { outline: none; } / 简化后 */ .btn:is(:hover, :focus, :active) { outline: none; }
四、总结
CSS 伪类是前端样式开发的“瑞士军刀”，熟练掌握状态伪类、结构伪类、表单伪类的用法，能大幅减少 HTML 冗余类名和 JS 样式操作。
