行内样式不一定覆盖外部CSS。因优先级受同一元素、同名属性及!important影响；其specificity为1000，高于class、id等，但遇外部!important、initial/unset值、CSS变量、媒体查询或JS动态修改时可能被反超。
行内样式是否一定覆盖外部 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权重更高（比如也来自行内，或来自更晚加载的）
真正容易忽略的是：JS 动态设置的 element.style.xxx 和 HTML 中写的 style="..." 在优先级上完全等价，但前者更容易被后续 JS 覆盖，而后者更“顽固”。
