CSS3伪类和伪元素是前端开发中不可或缺的工具，它们能让你在不修改HTML结构的情况下，精确控制元素的样式与行为。本文将从分类、语法到实际应用场景，系统梳理这些选择器的用法，并结合TypeScript、JavaScript等语言的最佳实践，助你写出更优雅、高效的样式代码。

一、结构性伪类：基于文档树的位置选择

结构性伪类根据元素在DOM树中的位置进行匹配，尤其适合处理列表、表格等重复性结构。以下是最常用的几类：

  • :root：选择文档根元素（HTML中通常是<html>），常用于定义全局CSS变量。例如在TypeScript项目中，可通过:root统一管理主题色。
  • :nth-child(n) 与 :nth-last-child(n)：分别从正向和反向选择第n个子元素，支持odd/even关键词。
  • :first-child、:last-child 与 :only-child：选择父元素的第一个、最后一个或唯一子元素。
  • :first-of-type、:last-of-type 与 :only-of-type：在同类型兄弟元素中定位首、尾或唯一元素。
  • :empty：匹配没有子元素（包括文本节点）的元素，常用于隐藏空容器。

实战建议：在React或Vue组件中，结合:nth-child实现隔行变色或列表序号样式，比JavaScript遍历更高效。

代码示例：: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状态伪类专注于表单元素的不同状态，极大提升了用户输入体验。无论你使用原生HTML还是React/Angular框架，这些选择器都能无缝配合。

  • :enabled 与 :disabled：区分可操作与禁用组件，例如禁用按钮的灰色样式。
  • :checked 与 :indeterminate：处理复选框、单选框的选中与不确定状态（如部分全选）。
  • :valid 与 :invalid：根据HTML5验证规则自动反馈输入合法性。
  • :required 与 :optional：标记必填或可选字段，避免JavaScript重复逻辑。
  • :read-only 与 :read-write：控制只读与可编辑区域的视觉差异。

✅ 注意：在TypeScript项目中，可结合:invalid与自定义错误提示组件，实现无侵入的表单验证样式。

代码示例：:enabled 启用的表单元素:disabled 禁用的表单元素:checked 被选中的单选/复选框:indeterminate 不确定状态的复选框（如部分选中）:default 默认选项（如提交按钮）:valid 输入值有效的表单元素:invalid 输入值无效的表单元素:in-range 值在指定范围内的输入元素:out-of-range 值超出指定范围的输入元素:required 必填的表单元素:optional 可选的表单元素:read-only 只读的表单元素:read-write 可读写的表单元素

三、用户交互伪类：响应鼠标与键盘行为

用户交互伪类让界面能实时反馈用户操作。从悬停到焦点，这些选择器是提升可用性的关键。

  • :hover：鼠标悬停时触发，常用于按钮、链接的变色或缩放效果。
  • :active：元素被激活（如点击瞬间）时生效，适合制作按下反馈。
  • :focus 与 :focus-within：前者作用于当前聚焦元素，后者则匹配包含聚焦子元素的父容器，非常适合表单组或下拉菜单的样式联动。
  • :focus-visible：仅当键盘导航（如Tab键）触发焦点时生效，避免鼠标点击时出现多余的轮廓线。在无障碍设计中尤为重要。
  • :target：匹配URL片段标识符（如#section）指向的元素，常用于页面内导航的高亮。

性能提示：避免在:hover中使用高消耗属性（如box-shadow或transform），可考虑使用CSS过渡或will-change优化。

代码示例：:hover 鼠标悬停时:active 被激活时（如点击）:focus 获得焦点时 比如输入框聚焦样式input[type=text]:focus{ outline: 1px solid #FF00FF;} 或者写成outline:0, 再加入border，这样更方便圆角:focus-within 子元素获得焦点时:focus-visible 键盘操作获得焦点时（非鼠标点击）:target URL 片段标识符指向的元素

四、语言与逻辑组合伪类：更灵活的匹配规则

语言伪类:lang()允许根据lang属性设置样式，适合多语言站点（如中文与英文的不同字体）。逻辑组合伪类则提供了类似编程语言的条件能力：

  • :not()：排除特定选择器，例如:not(.disabled)选中所有非禁用元素。
  • :is() 与 :where()：接受选择器列表，匹配其中任一条件。区别在于:where()的优先级始终为0，便于覆盖。
  • :has()：CSS4新特性，选择包含匹配子元素的父元素。例如div:has(> img)选中包含图片的div。目前Chrome、Safari已支持，Firefox需实验标志。

⚠️ 兼容性警告：:has()在旧浏览器中不支持，使用时建议提供回退方案。在C++或Python后端渲染的模板中，尽量优先使用类名控制。

代码示例：:lang(language-code) 基于语言属性的元素（如 <html lang="en">）:not(selector) 不匹配给定选择器的元素:is(selector-list) 匹配列表中任一选择器的元素:where(selector-list) 与 :is 类似，但优先级为0:has(selector) 包含匹配选择器的子元素的元素（CSS4，部分浏览器支持）

五、伪元素实战：从装饰到功能扩展

伪元素（::before、::after等）能创建不占DOM的装饰内容。以下是最常见的应用场景：

  • 添加图标与分隔符：通过::before插入Font Awesome图标，无需额外HTML标签。
  • 工具提示（Tooltip）：利用::after生成气泡框，结合:hover显示。
  • 首字下沉与首行样式：::first-letter和::first-line实现杂志排版效果。
  • 自定义占位文本与选中样式：::placeholder和::selection控制输入框和文本高亮颜色。
  • 清除浮动：经典::after清除法，避免父容器高度塌陷。
  • 纯CSS图形：如三角形、气泡框，完全无需图片。
  • 列表标记与全屏背景：::marker自定义列表序号，::backdrop设置全屏视频背景色。

最佳实践：伪元素生成的内容不可被屏幕阅读器识别，因此关键信息应放在HTML中。在Go或JavaScript项目中，若需交互性（如点击切换），应使用真实DOM元素。

代码示例：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS :root 伪类演示</title>
          <style>
            /* 在:root中定义全局CSS变量 */
            :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --text-color: #333;
            --background-color: #f9f9f9;
            --spacing: 1rem;
            --border-radius: 8px;
            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }
            /* 使用CSS变量 */
            body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--background-color);
            padding: var(--spacing);
            max-width: 1200px;
            margin: 0 auto;
            }
h2::before {
content: "◆";
margin-right: 10px;
color: #ff6b6b;
}
.tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
/* 其他样式 */
}
article p::first-letter {
font-size: 3em;
float: left;
line-height: 0.8;
}
.intro::first-line {
font-weight: bold;
color: #2c3e50;
}
input::placeholder {
color: #95a5a6;
font-style: italic;
}
::selection {
background: #f39c12;
color: white;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.triangle {
position: relative;
}
.triangle::after {
content: "";
position: absolute;
border: 10px solid transparent;
border-top-color: #3498db;
}
ul.custom-list li::marker {
content: "→";
color: #e74c3c;
}
video::backdrop {
background-color: #2c3e50;
}

六、避免滥用与性能考量

尽管伪类伪元素功能强大，但过度使用会带来维护和性能问题：

  • 避免关键内容依赖伪元素：它们不属于DOM，无法被JavaScript直接操作。
  • 慎用复杂选择器：嵌套过深的:not()或:has()可能降低渲染性能。
  • 保持语义清晰：先用HTML定义结构，再用CSS美化。例如在TypeScript的组件库中，优先使用className而非复杂伪类。

✅ 检查清单：是否可以用类名替代？是否影响无障碍访问？是否在目标浏览器中兼容？

[AFFILIATE_SLOT_1]

通过以上分类与案例，相信你已经掌握了CSS3伪类和伪元素的核心用法。在实际项目中，它们能显著减少JavaScript代码量，提升样式可维护性。无论你使用React、Vue还是原生JavaScript，这些选择器都是前端工具箱中的利器。

[AFFILIATE_SLOT_2]