灰色带删除线的 CSS 属性表示被更高优先级规则覆盖，需通过 Reveal in Styles 定位生效规则，检查 specificity、加载顺序、!important、继承与重置、第三方库及 shadow DOM 等影响因素。
看 computed 样式里带删除线的属性
浏览器开发者工具的 Computed 面板里，如果某个 CSS 属性值显示为灰色并带删除线，说明它被更高优先级的规则覆盖了。这不是选择器写错了，而是“赢不了”。此时要顺着这条线查：谁在它上面、为什么能赢。
- 右键该属性 →
Reveal in Styles，跳转到Styles面板定位具体哪条规则生效 - 注意同一条规则里多个声明的独立性——
color被覆盖不代表font-size也被覆盖 - 检查是否启用了
:hover、:focus等伪类状态，这些会动态切换生效规则
比对选择器 specificity 数值
CSS 优先级不是“谁写在后面就赢”，而是按 内联 > ID > 类/属性/伪类 > 元素/伪元素 四级计分。即使你写了 .btn.primary:hover，也干不过一个 #header .nav li a（ID + 类 + 元素 ×2）。
- 用在线工具如 specificity.keegan.st 输入选择器，直接算出
0,1,2,3这类数值 -
.container[data-id="1"]::before是0,0,2,1（两个类/属性，一个伪元素） -
div#main .item.active是0,1,2,1（一个 ID，两个类，一个元素），比上例高一级
检查样式表加载顺序和 !important
同 specificity 下，后加载的样式胜出；但 !important 会打破这个顺序，且对单个声明生效，不是整条规则。
- 打开
Network面板确认 CSS 文件加载顺序，尤其是动态插入的或 JS 注入的 style 标签 -
!important在Computed面板中会标为important，且无视加载顺序和 specificity - 多个
!important同时存在时，仍按 specificity + 顺序比较——它只是把“权重”提到最高档，不是无限档
留意继承、层叠与重置类的影响
有些样式看似被覆盖，其实是没继承到，或被 all: unset / all: revert 这类重置操作清掉了。
立即学习“前端免费学习笔记（深入）”；
- 检查父元素是否设置了
color: inherit却没给自身定义颜色，导致子元素“看起来没生效” -
button { all: unset; }会抹掉所有默认样式（包括display、border），后续再设color也不顶用，得手动补全 - 第三方 UI 库（如 Bootstrap、Tailwind）常带
base层样式，它们可能用通配符或低 specificity 但极早加载的方式“静默接管”
.my-btn {
color: red !important;
background: blue;
}
/* 如果另一处写了 */
.btn-primary {
color: green;
background: yellow !important;
}
/* 那么最终 color 是 red（同 important，按 specificity 和顺序决胜），background 是 yellow */真正卡住的时候，往往不是不会写选择器，而是没意识到某条规则来自 Web Component 的 shadow DOM、CSS-in-JS 的哈希类、或者构建工具自动插入的 scope 属性。这些场景下，选择器“正确”但根本匹配不到目标节点。
