CSS3 伪类和使用场景
CSS3 伪类（Pseudo-classes）大全
CSS3 引入了许多新的伪类，以下是完整的 CSS3 伪类分类列表（包括 CSS2 的伪类）：
一、结构性伪类（Structural Pseudo-classes）
这些伪类根据元素在文档树中的位置选择元素
:root- 选择文档的根元素（HTML 中通常是<html>）:nth-child(n)- 选择父元素的第 n 个子元素:nth-last-child(n)- 从末尾开始计算的第 n 个子元素:nth-of-type(n)- 选择同类型的第 n 个兄弟元素:nth-last-of-type(n)- 从末尾开始计算的同类型第 n 个兄弟元素:first-child- 父元素的第一个子元素:last-child- 父元素的最后一个子元素:first-of-type- 同类型中的第一个兄弟元素:last-of-type- 同类型中的最后一个兄弟元素:only-child- 父元素中唯一的子元素:only-of-type- 父元素中唯一类型的子元素:empty- 没有子元素的元素（包括文本节点）
二、UI 状态伪类（UI State Pseudo-classes）
与用户界面状态相关
:enabled- 启用的表单元素:disabled- 禁用的表单元素:checked- 被选中的单选/复选框:indeterminate- 不确定状态的复选框（如部分选中）:default- 默认选项（如提交按钮）:valid- 输入值有效的表单元素:invalid- 输入值无效的表单元素:in-range- 值在指定范围内的输入元素:out-of-range- 值超出指定范围的输入元素:required- 必填的表单元素:optional- 可选的表单元素:read-only- 只读的表单元素:read-write- 可读写的表单元素
三、用户交互伪类（User Action Pseudo-classes）
与用户交互相关
:hover- 鼠标悬停时:active- 被激活时（如点击）:focus- 获得焦点时:focus-within- 子元素获得焦点时:focus-visible- 键盘操作获得焦点时（非鼠标点击）:target- URL 片段标识符指向的元素
四、语言相关伪类（Linguistic Pseudo-classes）
:lang(language-code)- 基于语言属性的元素（如<html lang="en">）
五、逻辑组合伪类（Logical Combination Pseudo-classes）CSS4
:not(selector)- 不匹配给定选择器的元素:is(selector-list)- 匹配列表中任一选择器的元素:where(selector-list)- 与:is类似，但优先级为0:has(selector)- 包含匹配选择器的子元素的元素（CSS4，部分浏览器支持）
六、其他伪类
:fullscreen- 全屏显示的元素:modal- 作为模态对话框的元素:picture-in-picture- 画中画模式的元素
使用示例
/* 结构性伪类 */
li:nth-child(2n) { background: #f0f0f0; }/* UI状态伪类 */
input:invalid { border-color: red; }/* 用户交互伪类 */
button:hover { background: #ddd; }/* 逻辑组合伪类 */
div:not(.special) { opacity: 0.8; }
注意：部分伪类（特别是 CSS4 的 :has）可能需要检查浏览器兼容性。
CSS 伪元素使用场景
伪元素是 CSS 提供的强大工具，它们允许你为元素添加装饰性内容或样式特定部分，而无需修改 HTML 结构。以下是使用伪元素的典型场景：
1. 添加装饰性内容时
适用伪元素：::before、::after
- 添加图标、分隔符等视觉元素
h2::before {content: "◆";margin-right: 10px;color: #ff6b6b;
}
- 创建工具提示
.tooltip:hover::after {content: attr(data-tooltip);position: absolute;/* 其他样式 */
}
2. 处理文本特殊部分时
适用伪元素：::first-letter、::first-line
- 首字下沉效果
article p::first-letter {font-size: 3em;float: left;line-height: 0.8;
}
- 段落首行特殊样式
.intro::first-line {font-weight: bold;color: #2c3e50;
}
3. 处理表单元素时
适用伪元素：::placeholder、::selection
- 自定义占位文本样式
input::placeholder {color: #95a5a6;font-style: italic;
}
- 自定义文本选中样式
::selection {background: #f39c12;color: white;
}
4. 创建视觉效果时
- 清除浮动（经典用法）
.clearfix::after {content: "";display: table;clear: both;
}
- 创建纯CSS图形
.triangle {position: relative;
}
.triangle::after {content: "";position: absolute;border: 10px solid transparent;border-top-color: #3498db;
}
5. 优化列表样式时
适用伪元素：::marker
- 自定义列表标记
ul.custom-list li::marker {content: "→";color: #e74c3c;
}
6. 处理媒体元素时
适用伪元素：::backdrop
- 全屏视频的背景样式
video::backdrop {background-color: #2c3e50;
}
何时应该避免使用伪元素？
- 关键功能内容：伪元素生成的内容不会被屏幕阅读器读取，也不属于DOM
- 需要交互的元素：伪元素不能被JavaScript直接操作
- 过度复杂的设计：当HTML结构能更清晰地表达内容时
最佳实践
- 语义优先：先用HTML表达内容结构，再用伪元素添加装饰
- 适度使用：避免过度依赖伪元素导致样式难以维护
- 浏览器兼容性：检查目标浏览器的支持情况
- 性能考虑：大量使用伪元素可能影响渲染性能