1. 伪类选择器：CSS的“智能触发器”

如果你写过CSS，那你肯定用过选择器。.class、#id、div、p，这些都是最基础的，它们像是一个个地址标签，告诉浏览器“嘿，把这个样式应用到那个元素上”。但有时候，我们需要的不是给一个静态的元素上色，而是想根据元素的状态、位置，甚至是用户的行为来动态地改变样式。比如，鼠标悬停时按钮变色，访问过的链接显示不同颜色，或者表格的奇数行有个背景色。这时候，基础选择器就有点力不从心了。

伪类选择器，就是CSS为了解决这类“动态”或“条件”样式问题而生的“智能触发器”。它不是基于HTML文档中静态存在的class或id，而是基于元素在特定时刻所处的状态、在文档树中的结构位置，或者与用户交互的情况来应用样式。你可以把它理解为一个附加在基础选择器后面的“状态描述符”，用单个冒号:来连接。

举个例子，a:hover这个选择器，它选中的不是所有<a>标签，而是正处于鼠标悬停状态的那个<a>标签。这个“悬停”状态是动态的、临时的，伪类选择器让我们有能力捕捉并响应这个瞬间。

为什么说这篇就够了？因为伪类选择器虽然数量不少，但核心逻辑清晰，一旦理解了分类和每个分类下的典型代表，剩下的就是查手册和应用的问题。本文将不按字母顺序罗列，而是根据其核心用途，将它们分为四大类：用户交互伪类、结构伪类、表单状态伪类和其他功能性伪类。我们会深入每一类的典型场景，解释其工作原理，并穿插大量实际代码示例和只有踩过坑才知道的注意事项。

2. 用户交互伪类：响应用户的每一个动作

这是最常用、最直观的一类伪类。它们直接与用户的鼠标、键盘等交互行为挂钩，是提升网页体验的关键。

2.1:hover- 悬停的魔法

:hover可能是所有开发者第一个接触的伪类。当用户的指针（通常是鼠标）悬停在一个元素上时，该元素就会匹配这个伪类。

.button { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; transition: background-color 0.3s ease; /* 平滑过渡 */ } .button:hover { background-color: #0056b3; cursor: pointer; /* 改变光标为手型，强烈建议加上 */ }

核心要点与避坑：

• 并非所有设备都有“悬停”：在触摸屏设备（手机、平板）上，没有真正的“悬停”状态。:hover效果通常会在用户首次触摸（点击）元素时被触发，并可能一直保持到用户触摸其他地方。这可能导致一些意外的样式残留。因此，不能将关键功能（如显示重要信息）完全依赖于:hover，通常需要配合点击事件或其他方式。
• 性能考虑：过于复杂的:hover动画（如大面积阴影变化、模糊滤镜）在低性能设备上可能导致卡顿。使用transform和opacity属性进行动画通常性能更好。
• 与:focus的区分：对于可交互元素（如按钮、链接），除了:hover，务必也要设置:focus样式，以保证键盘用户的体验。

2.2:active- 激活的瞬间

:active匹配的是元素被激活的瞬间。对于鼠标用户来说，就是鼠标按键被按下但还未松开的那一刻。

.button:active { transform: translateY(2px); /* 模拟被按下的效果 */ box-shadow: 0 1px 2px rgba(0,0,0,0.2); }

这个状态非常短暂，但用来制造点击的物理反馈感非常有效，能让交互感觉更真实。

2.3:focus、:focus-within与:focus-visible- 焦点的艺术

焦点管理是Web可访问性的基石，对于键盘导航用户至关重要。

• :focus：匹配当前获得焦点的元素。通常是用户用Tab键切换到的元素，或者通过点击（对于某些元素）激活的元素。

  input:focus { outline: 2px solid #4d90fe; /* 自定义焦点轮廓，比默认的`outline`更好看 */ border-color: #4d90fe; }

  注意：很多人会用outline: none;来去掉浏览器默认的焦点环，这是极其错误的做法，会严重损害可访问性。正确做法是像上面一样，用更美观的自定义样式替换它。

• :focus-within：这个伪类非常强大。它匹配自身获得焦点，或者其任意后代元素获得焦点的元素。这在表单组或复杂组件中特别有用。

  .form-group:focus-within { border-left: 4px solid #4d90fe; padding-left: 10px; }

  当.form-group内的任何一个input获得焦点时，整个.form-group的样式都会改变，视觉上清晰地提示用户当前的操作区域。

• :focus-visible：这是一个较新的伪类，用于解决一个常见问题：当用鼠标点击一个按钮时，我们通常不希望出现焦点环（:focus样式），但用键盘Tab到它时，我们又需要。:focus-visible只会在浏览器认为需要显示焦点指示器时（例如键盘操作）才匹配。

  /* 只在键盘焦点时显示样式 */ .button:focus-visible { outline: 3px dashed #ff6b6b; } /* 传统的:focus样式，可能被鼠标点击触发 */ .button:focus { outline: none; /* 可以在这里禁用，由:focus-visible接管 */ }

  这让我们能更精细地控制焦点样式的展示逻辑，提升整体体验。

3. 结构伪类：基于DOM位置的精准选择

这类伪类根据元素在其父元素所有子元素列表中的位置（索引）来进行选择。它们就像CSS版的querySelectorAll加上数组索引。

3.1:first-child、:last-child、:only-child

这几个最好理解：

• :first-child：匹配作为其父元素的第一个子元素的元素。
• :last-child：匹配作为其父元素的最后一个子元素的元素。
• :only-child：匹配作为其父元素唯一一个子元素的元素。

/* 给列表的第一项和最后一项特殊样式 */ .list-item:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; } .list-item:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-bottom: none; /* 去掉最后一个项目的底边线 */ } /* 只有一个子元素的容器，让子元素居中 */ .container:only-child { display: flex; justify-content: center; align-items: center; }

3.2:nth-child()与:nth-last-child()- 序列选择大师

这是结构伪类中最强大、最常用的两个。

• :nth-child(an+b)：从前往后数，匹配符合公式an+b的所有子元素。
  • :nth-child(odd)/:nth-child(even)：奇/偶数行。
  • :nth-child(3n)：每第3个元素（3, 6, 9...）。
  • :nth-child(3n+1)：从第1个开始，每第3个（1, 4, 7...）。
• :nth-last-child(an+b)：同理，但是从后往前数。

/* 斑马纹表格 */ tr:nth-child(even) { background-color: #f8f9fa; } /* 每行显示3个项目的网格，去除每行最后一个的右边距 */ .grid-item:nth-child(3n) { margin-right: 0; } /* 匹配倒数第2个子元素 */ .item:nth-last-child(2) { color: red; }

重大踩坑点：:nth-child的计数是基于所有子元素的。看这个例子：

<div class="container"> <p>我是一个段落</p> <span>我是一个span</span> <p>我是另一个段落</p> </div>

.container p:nth-child(2) { color: red; }

你觉得第二个<p>会变红吗？答案是：不会。因为:nth-child(2)选择的是父元素下第二个子元素，不管它的类型。在这个例子中，第二个子元素是<span>，而我们的选择器要求它同时是<p>，所以不匹配。如果你想选择“同级p元素中的第二个”，应该使用:nth-of-type()。

3.3:nth-of-type()与:nth-last-of-type()

这两个伪类解决了上述的坑。它们只计数特定类型的子元素。

• :nth-of-type(an+b)：匹配作为其父元素下第an+b个该类型子元素的元素。
• :nth-last-of-type(an+b)：从后往前数。

用回刚才的例子：

.container p:nth-of-type(2) { color: red; /* 这下成功了！选中了第二个<p>元素 */ }

所以，简单记：如果你想根据在所有子元素中的位置来选，用:nth-child；如果你想根据在同类型元素中的位置来选，用:nth-of-type。

3.4:not()- 反选利器

虽然严格来说:not()是一个伪类函数，但它常与结构伪类配合，用于排除某些元素。

/* 选中除了第一个和最后一个以外的所有 .item */ .item:not(:first-child):not(:last-child) { padding: 10px 0; border-bottom: 1px solid #eee; } /* 选中所有不是 disabled 状态的按钮 */ button:not(:disabled) { cursor: pointer; }

:not()的选择器参数可以很复杂，但要注意浏览器支持度和性能，过于复杂的选择器可能会影响渲染速度。

4. 表单状态伪类：让表单“活”起来

专门用于匹配表单元素在不同输入和状态下的样式，对于构建友好的表单界面必不可少。

4.1:checked- 选中状态

匹配被选中的单选按钮（<input type=”radio”>）、复选框（<input type=”checkbox”>）或<option>元素。这是实现自定义开关、复选框样式的核心。

<input type=”checkbox” id=”toggle” hidden> <label for=”toggle” class=”custom-checkbox”>点击我</label>

.custom-checkbox { display: inline-block; width: 40px; height: 20px; background-color: #ccc; border-radius: 10px; position: relative; cursor: pointer; transition: background-color 0.3s; } /* 利用相邻兄弟选择器 + 和 :checked 实现样式切换 */ #toggle:checked + .custom-checkbox { background-color: #4CAF50; } #toggle:checked + .custom-checkbox::after { left: calc(100% - 18px); /* 滑动小球的位置 */ }

这个技巧是纯CSS实现UI组件的基石。

4.2:disabled与:enabled

• :disabled：匹配任何被禁用的元素（拥有disabled属性）。
• :enabled：匹配任何启用的元素（默认状态）。

input:disabled { background-color: #e9ecef; cursor: not-allowed; opacity: 0.6; }

给禁用状态一个视觉上的弱化反馈，是良好的设计实践。

4.3:required与:optional

• :required：匹配拥有required属性的表单元素。
• :optional：匹配没有required属性的表单元素。

input:required { border-left: 4px solid #ffc107; /* 用黄色提示必填 */ }

可以在用户提交前就给予视觉提示。

4.4:valid与:invalid

根据表单元素的内容是否符合其类型（type）或模式（pattern）定义的验证规则来匹配。

• :valid：匹配内容验证通过的元素。
• :invalid：匹配内容验证失败的元素。

input:invalid { border-color: #dc3545; background-image: url(‘invalid-icon.png’); background-repeat: no-repeat; background-position: right center; } input:valid { border-color: #28a745; }

重要提示：为了避免页面一加载就给所有空但必填的输入框显示错误红色（因为空值对required字段是无效的），一个常见的技巧是将:invalid样式与:focus或用户交互结合。例如，可以只在输入框被触摸过（touched）后才应用:invalid样式，但这通常需要一点JavaScript配合。纯CSS下，可以这样缓和：

input:not(:focus):not(:placeholder-shown):invalid { border-color: #dc3545; }

这个选择器表示：匹配那些未获得焦点、值不是空（:not(:placeholder-shown)是一个巧妙的判断非空方法）且验证无效的输入框。这样，空输入框在初始状态下就不会显示错误了。

4.5:in-range与:out-of-range

专用于<input type=”number”>或<input type=”range”>等有min和max属性的元素，根据值是否在设定范围内来匹配。

4.6:read-only与:read-write

• :read-only：匹配readonly属性设置的元素（用户不能编辑，但可以选中和复制文本）。
• :read-write：匹配用户可编辑的元素（默认状态）。

5. 其他功能性伪类与组合应用

除了上述三大类，还有一些实用的伪类。

5.1 链接相关：:link、:visited

• :link：匹配所有未被访问过的链接（拥有href属性的<a>）。
• :visited：匹配所有已被访问过的链接。

a:link { color: #1a0dab; /* 经典的未访问蓝色 */ } a:visited { color: #681da8; /* 访问过的紫色 */ }

隐私限制：出于安全隐私考虑，现代浏览器对:visited伪类可应用的样式做了严格限制，通常只允许修改color、background-color、border-color等颜色相关属性，且必须是同一种属性（比如不能给未访问的设color，给访问过的设background-color）。且通过JavaScript无法获取到元素是否应用了:visited样式，以防止通过脚本探测用户浏览历史。

5.2:target- URL片段标识符

匹配当前URL的片段标识符（即#后面的部分）所指向的元素。常用来实现纯CSS的标签页、折叠面板、高亮文档章节等功能。

<a href=”#section1”>跳转到第一节</a> <section id=”section1”> <h2>第一节</h2> <p>内容…</p> </section>

section { border-left: 4px solid transparent; padding-left: 10px; transition: border-color 0.3s; } section:target { border-left-color: #4d90fe; /* 当URL是 #section1 时，这个section高亮 */ background-color: #f8f9fa; }

5.3 伪类的组合与优先级

伪类可以组合使用，以实现更精确的选择。

/* 鼠标悬停在一个未访问的链接上 */ a:link:hover { text-decoration: underline; } /* 表格中奇数行，且鼠标悬停时的样式 */ tr:nth-child(odd):hover { background-color: #e3f2fd; } /* 被选中且未禁用的复选框 */ input[type=”checkbox”]:checked:not(:disabled) { /* 样式 */ }

关于优先级（特异性），伪类选择器的权重等同于一个类选择器（.class）。所以a:hover的权重和.my-link是一样的。当多个规则冲突时，需要根据CSS优先级规则（内联样式 > ID > 类/伪类/属性 > 元素）来计算。组合使用伪类并不会无限增加权重，但多个类级选择器叠加，其权重会高于单个类。

6. 实战：用伪类构建一个交互式卡片组件

让我们综合运用多种伪类，构建一个常见的卡片组件，它具备悬停效果、内部结构样式和按钮交互反馈。

<div class=”card”> <img src=”thumbnail.jpg” alt=”示例图片” class=”card__img”> <div class=”card__content”> <h3 class=”card__title”>这是一个卡片标题</h3> <p class=”card__desc”>这里是卡片的描述内容，可能会比较长，会显示多行文字。</p> <div class=”card__actions”> <a href=”#” class=”card__btn card__btn–primary”>主要操作</a> <button class=”card__btn”>次要操作</button> </div> </div> </div>

.card { border: 1px solid #ddd; border-radius: 12px; overflow: hidden; /* 防止图片圆角溢出 */ background: white; transition: transform 0.3s ease, box-shadow 0.3s ease; max-width: 320px; } /* 1. 悬停时提升卡片 */ .card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } /* 2. 卡片内图片悬停缩放效果 */ .card__img { width: 100%; height: 180px; object-fit: cover; transition: transform 0.5s ease; } .card:hover .card__img { transform: scale(1.05); } .card__content { padding: 20px; } .card__title { margin-top: 0; margin-bottom: 10px; color: #333; } .card__desc { color: #666; line-height: 1.6; margin-bottom: 20px; } .card__actions { display: flex; gap: 10px; /* 使用gap属性设置按钮间距 */ } .card__btn { padding: 8px 16px; border: 1px solid #ccc; background: #f8f9fa; border-radius: 6px; cursor: pointer; text-decoration: none; color: #333; font-size: 14px; transition: all 0.2s ease; flex: 1; /* 按钮平均分配宽度 */ text-align: center; } /* 3. 按钮悬停和激活状态 */ .card__btn:hover { background-color: #e9ecef; border-color: #adb5bd; } .card__btn:active { transform: scale(0.98); /* 按下效果 */ } .card__btn:focus { outline: 2px solid #4d90fe; outline-offset: 2px; } /* 4. 主要按钮的特殊样式 */ .card__btn–primary { background-color: #007bff; border-color: #007bff; color: white; } .card__btn–primary:hover { background-color: #0056b3; border-color: #0056b3; } /* 5. 禁用状态的按钮 */ .card__btn:disabled { opacity: 0.5; cursor: not-allowed; } /* 6. 使用:not()和:last-child优化边距 */ .card__desc:not(:last-child) { margin-bottom: 20px; /* 只有当描述不是最后一项时才设置下边距 */ } /* 或者使用:last-child移除最后一个按钮的右边距（如果不用gap） */ /* .card__btn:not(:last-child) { margin-right: 10px; } */

在这个例子中，我们综合运用了：

• :hover实现卡片整体和图片的悬停交互。
• :active给按钮添加点击反馈。
• :focus确保按钮的键盘可访问性。
• :disabled处理按钮禁用状态。
• :not()和:last-child进行更精细的间距控制，避免了使用通用兄弟选择器可能带来的冗余代码。

7. 性能考量与最佳实践

虽然伪类选择器非常强大，但不当使用也可能带来问题。

1. 保持选择器简洁：过于复杂、冗长的选择器链（例如.nav > ul > li:first-child > a:hover）会增加浏览器的匹配计算成本。尽量让选择器扁平化，如果某个元素需要复杂选择，考虑直接给它添加一个类名。
2. 避免通用选择器*与伪类的过度组合：像*:hover这样的选择器会匹配页面上的每一个元素，性能极差。
3. 理解渲染与重绘：某些伪类样式（如:hover改变盒模型属性width/height、box-shadow扩散）会触发页面布局（Layout）和绘制（Paint）。而改变transform和opacity通常只触发合成（Composite），性能开销小得多。在制作动画时，应优先考虑后者。
4. 移动端优先考虑：如前所述，:hover在触摸设备上的行为是“模拟”的。设计关键交互时（如下拉菜单），不能只依赖:hover，需要结合:focus、：active，甚至用一点JavaScript来确保在所有设备上都能正常工作。常见的模式是，在移动端使用点击（touchstart/click）来切换一个.active类，用CSS来控制显示隐藏。
5. 渐进增强：对于较新的伪类如:focus-visible、:where()，在使用时应考虑回退方案。例如，同时编写:focus和:focus-visible的样式，让不支持新特性的浏览器至少有一个可用的焦点样式。

伪类选择器是CSS从“描述静态样式”走向“定义交互逻辑”的关键一步。它让样式表具备了初步的“感知”和“响应”能力。掌握它们，意味着你能用更简洁、更语义化的方式，实现更丰富、更动态的视觉效果和用户体验，而无需事事依赖JavaScript。从最常用的:hover、:nth-child开始，逐步将:focus-within、:not()、:checked等纳入你的工具箱，你的CSS代码会变得更加灵活和强大。记住，多写、多试、多思考“如果…就…”的场景，是掌握伪类选择器的最佳途径。