样式被划掉是因为 specificity 权重低于其他规则，需对比权重值（如 0,1,1,0）；css 层叠还受来源顺序影响，后加载样式优先；提权应优先用精准选择器而非 !important；继承属性不参与优先级计算，需在 Computed 面板确认是否真被应用。
样式被划掉？先看开发者工具里的 specificity 数值
样式“不生效”绝大多数时候不是写错了，而是被更高优先级的规则覆盖了——浏览器在 Styles 面板里用横线划掉你的声明，鼠标悬停会提示 specificity is lower than another rule。这时候别改属性值，先点开那条被划掉的样式，看它右边显示的权重（比如 0,1,1,0 或 110），再对比覆盖它的那条规则的权重。
- ID 选择器（如
#header）算 100，类/伪类/属性选择器（如.btn、:hover、[disabled]）各算 10，元素（如div、p）各算 1 - 嵌套层数本身不加权，但长链如
.container .list .item a累计了 3 个类 + 1 个元素 = 31，很容易压过你后来写的.item-link（仅 10） - 行内样式
style="margin: 20px"权重是 1000，几乎无法被外部 CSS 覆盖（除非加!important）
为什么改了 .class 还是没用？检查样式来源顺序和加载位置
CSS 的层叠（cascade）不仅看选择器权重，还严格按「来源 + 顺序」裁决：内联 > ID > 类 > 元素；同权重时，后定义的赢。但很多人忽略的是，样式来源本身就有天然排序：
- 外部样式表（
）优先级低于内部样式（ - 多个
标签按 html 中出现顺序加载，后面引入的 CSS 文件里的规则，能覆盖前面文件中同权重的选择器 - 如果用了
@import，它会被当作“最后加载”，但实际解析顺序可能滞后，容易引发意料外的覆盖
常见陷阱：ui 框架（如 Ant Design）的 CSS 在 末尾引入，你自定义的 common.css 却放在前面——结果你写的 .btn 永远赢不了框架里更晚加载、权重相当的 .ant-btn。
想强行提权？慎用 !important，优先用精准选择器替代堆嵌套
!important 是把双刃剑：它确实能绕过所有常规优先级，但一旦滥用，后续维护就变成“谁加得更多谁赢”的军备竞赛。真正可持续的提权方式，是写出语义清晰、权重可控的选择器：
- 避免无意义嵌套，比如把
.card .title改成.card__title（BEM 命名），既提升可读性，又让权重稳定在 10，不因父容器变化而浮动 - 用子选择器
>替代后代选择器空格，例如.modal > .header比.modal .header更精准，也更容易预测覆盖关系 - 必要时用属性选择器兜底，比如
[data-role="tooltip"]权重为 10，和类选择器持平，但语义更强，且不易被通用类误覆盖
记住：!important 只应在调试时临时启用，或用于覆盖第三方库中不可修改的内联样式——长期依赖它，等于主动放弃 CSS 的可维护性。
继承样式不会“失效”，但根本没机会参与优先级计算
像 color、font-size 这类可继承属性，如果子元素没写任何规则，就会“看起来生效”，但这不是优先级赢了，而是它压根没进层叠队列。真正危险的是误判：
-
margin、padding、border等**不可继承**属性，父元素设了再大也没用，子元素必须自己声明 - 在
Computed面板里，继承来的值会标注 “inherited from XXX”，而直接设置的值才显示具体来源文件和行号 - 如果发现某个文字颜色没变，先查是不是父元素写了
color: #999，而子元素用了span { color: #333; }——这时生效的是子元素规则，不是继承；但如果子元素只写了span { font-weight: bold; }，那颜色就纯靠继承，此时改父元素才有效
最常被忽略的一点：CSS 的“不生效”，往往是你以为它该继承、该覆盖、该按顺序执行，但它其实根本没被浏览器纳入比较范围——打开 Computed 面板，盯着那个“inherited”标签看三秒，比瞎猜快十倍。