CSS 优先级规则实战：从迷宫到通关的实操指南

在做页面样式时，总会有那么一两次，你的改动被意外“盖过”或样式前后自相矛盾，像在迷宫里找不到出口。这往往与CSS的优先级规则有关。本文用具体场景带你看清哪些规则生效、为什么生效，以及如何用更少的代码写出更可控的样式。

通配符与继承：默认状态的“底色”

通配符 * 和继承链上的样式会形成一个默认的底色层。比如在表格里统一加边框或表头文字加加粗，用通配符配合继承，可以少写很多重复代码。但通配符的优先级很低，容易被更具体的规则覆盖，在表格里统一改边框时，如果表格的父级或同级样式更具体，通配符的改动可能看不见。

类选择器、ID 与属性选择器：选择器的“精确度”决定优先级

选择器的特异性（specificity）是优先级的核心。类选择器 .box 比 ID 选择器 #box 的特异性低，ID 比属性选择器 [type=button] 又低。在实际中，比如为按钮添加悬停样式，ID 确定性更强，更容易直接覆盖类的样式，除非另有更高特异性规则介入。

实战小技巧：当你发现一个按钮样式被类覆盖时，可以临时给按钮加一个内联 style 或改用 ID，快速测试优先级走向，定位是特异性还是来源先后的问题。

来源先后：在浏览器中的解析顺序

即便两个选择器的特异性相同，浏览器也会按出现顺序来决定最终样式。这是“来源先后”（source order）的效力。比如在样式表中，先定义的 .btn 会覆盖后续的同名 .btn，除非有更高特异性规则。

场景化处理：在做组件化开发时，把通用样式放后面，组件内部的更具体样式放在前面，可以避免样式被外部样式意外覆盖。

伪类与伪元素：细枝末节也能决定成败

伪类（如 :hover, :focus）和伪元素（如 ::before）的优先级通常高于常规选择器。在为链接或表单控件添加交互态时，要注意它们的优先级关系，避免普通类的样式被意外覆盖。

实战：从“被改色”到“精确控制”

假设你正在为一个电商页面的商品卡片做样式，希望悬停时出现阴影，但发现一直不生效。

1. 检查是否被更具体的规则覆盖：是否有类似 .card .title 或 .card:hover .title 的样式在影响？
2. 查看来源先后：你的悬停样式是在哪一部分样式表中定义的？是否有更早的同名规则？
3. 引入更高特异性：使用 ID 或属性选择器增强特异性，如 #main-card:hover 或 [data-state=hover]。
4. 使用伪类/伪元素：如果目标是卡片本身，考虑使用 :hover 或 :focus 来触发变化。
5. 内联救急：在不确定优先级时，可以临时给元素加 style，快速验证变化来源，再决定长期方案。

结语

CSS 优先级规则的本质，是让浏览器在多个样式之间做出取舍。理解这些规则并用好来源先后、特异性与伪类优先级，能让你在做样式调整时更像“通关玩家”，少走弯路。关键在于持续实践与记录哪些规则在哪些场景下生效，逐步形成自己的调优直觉。