伪类：状态与结构

伪类描述元素在某个状态或结构位置下是否匹配。:hover、:focus-visible、:checked、:disabled 来自交互或控件状态，:first-child、:nth-child() 来自树结构，:not()、:is() 和 :where() 用于组合条件。

button:focus-visible { outline: 3px solid Highlight; }
li:nth-child(even) { background: #f6f6f6; }
nav a:not([aria-current="page"]) { opacity: .75; }

:hover 不能替代键盘焦点；触摸设备也未必有稳定的悬停状态。:nth-child() 按所有兄弟计算，:nth-of-type() 按同类型元素计算，混用时要先画出 DOM 结构。:where() 的特异性为零，:is() 取参数中最高的特异性，这会影响后续覆盖。

实验与练习

用键盘、鼠标和触摸模拟分别观察 :hover 与 :focus-visible。在混合 li、div 的列表中比较 :nth-child(2) 和 :nth-of-type(2)，记录匹配差异。最后用 :where() 降低一条组件默认规则的覆盖成本。

可运行微实验：从匹配到胜出

在一个页面中保留三个同名元素，给它们同时设置类型、类、属性和伪类规则。先在 Elements 的 Matched CSS Rules 记录“命中但未胜出”的声明，再只改变一个条件：元素增加类、属性值改变、祖先增加类或规则移入另一层。每次只记录匹配集合、特异性/层级和最终 computed value，避免把“选择器没命中”和“命中了但被覆盖”混为一谈。

<p class="notice" data-state="error">消息</p>
<style>p { color: gray } .notice { color: navy } [data-state="error"] { color: crimson }</style>

常见错误

• 只写 :hover，让键盘用户看不到焦点。
• 把 :first-child 当成“第一个同类型元素”。
• 用复杂 :nth-child 选择器代替明确的数据状态。
• 忽略 :is()、:where() 对特异性的不同影响。

继续阅读

伪类改变选择条件，下一篇学习伪元素如何生成可样式化的虚拟内容：伪元素。

练习

1. 用最小输入复现“伪类：状态与结构”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案