CSS行内样式优先级详解与控制技巧

CSS行内样式虽以1000的高specificity稳居优先级顶端，却并非“绝对权威”——当外部样式启用!important、采用initial/unset重置、依赖动态CSS变量、嵌入媒体查询或遭JavaScript实时覆盖时，它反而可能被精准反超；掌握这些边界条件与开发者工具中的Computed面板调试技巧，才能真正掌控样式的最终呈现，告别“写了却不起作用”的困惑。

行内样式是否一定覆盖外部 CSS

不一定。虽然行内样式（style 属性）通常优先级更高，但前提是它作用在**同一个元素**、**同名属性**、且**没有被 !important 干扰**。如果外部样式用了 !important，而行内样式没用，那外部样式反而会赢。

CSS 优先级计算中行内样式的权重是多少

行内样式的权重要比 class、id、标签选择器高得多：它的 specificity 值是 1000（即 1,0,0,0）。对比一下：

• #header .nav a 是 111（1 个 id + 1 个 class + 1 个标签）
• .btn-primary 是 10
• div 是 1

所以只要没加 !important，style="color: red;" 一定会压过 .text-blue { color: blue; }。

哪些情况下行内样式会被外部样式反超

以下几种情况会让外部样式“翻盘”：

• 外部规则带 !important，例如 color: green !important;，而行内样式没加 !important
• 行内样式写的是 color: initial 或 unset，实际清除了效果
• 使用了 CSS Custom Properties（变量），而变量定义在外部且被 JS 动态改写，行内样式只是引用了变量，不等于锁定值
• 媒体查询或 @supports 中的外部规则生效，而行内样式无条件应用，导致响应式失效

调试时如何快速确认谁在起作用

浏览器开发者工具里看 Computed 面板最直接。注意两点：

• 被划掉的样式表示被更高优先级覆盖
• 行内样式会显示为 element.style，点开能看到原始字符串，比如 style="margin: 0; padding: 8px;"
• 如果某条样式旁边标着 !important 却仍被覆盖，说明有另一个 !important 权重更高（比如也来自行内，或来自更晚加载的