行内样式权重固定为1000，高于外部样式中任何选择器组合；其优先级源于规范硬性定义，不依赖匹配过程或加载时机，仅!important可覆盖。
行内样式权重固定为 1000，外部样式选择器权重通常远低于它
浏览器计算 CSS 优先级时，不是看“写在哪”，而是按选择器的权重（specificity）累加。行内样式通过 style 属性直接绑定到元素，其权重被规范硬性定义为 1000；而外部 CSS 文件里的规则，哪怕用 #header（ID 选择器，权重 100），或 .nav .item:hover（100 + 10 + 10 = 120），也很难突破 1000 这道门槛。
常见误区是以为“外部样式加载慢所以优先级低”，其实和加载时机无关——即使外部 CSS 已完整解析并生效，只要没加 !important，它的声明仍会被 style="color: red;" 覆盖。
- 权重对比示例：
style="margin: 0;"（1000） >#app .container（100 + 10 = 110） >.btn（10） >div（1） - 外部样式里写
div { margin: 20px; }，对某个<div style="margin: 0;"></div>完全无效 - 权重不支持“叠加多个 class 来超过 1000”，
.a.b.c.d.e仍是10 × 5 = 50
外部样式表的规则本质是“选择器匹配 + 权重计算”，而行内样式跳过选择器匹配
外部 CSS 的每条规则都需要经过“选择器是否匹配该元素”这一步判断，再比权重；行内样式则直接作用于当前元素，不依赖选择器逻辑，相当于“免检通道”。这也是为什么它优先级高得如此稳定——没有匹配失败的可能，也没有特异性计算的变数。
比如你写：<div id="main" class="content"></div>，外部样式中 #main.content 和 div#main 权重都是 100 + 10 = 110 或 1 + 100 = 101，但都远低于 style 的 1000。
- 行内样式不会受父元素、继承链或伪类状态影响，它只管自己
- 外部样式中
:hover、:nth-child()等动态伪类，对行内样式无穿透能力 - JavaScript 动态设置
element.style.color = "blue"，等价于写死style属性，同样走 1000 权重路径
!important 是唯一能压倒行内样式的例外，但它不改变权重，只改规则
!important 不是“更高权重”，而是触发 CSS 层叠算法中的一个特殊分支：当声明带 !important，它会在所有普通声明（包括行内样式）之后再比一次。所以 p { color: green !important; } 能覆盖 <p style="color: red;"></p>，不是因为权重赢了，而是规则层级更高。
- 行内样式自己加
!important（如style="color: red !important;"）才能抵抗外部的!important - 多个
!important声明之间，仍要回退到权重和源顺序判断 - 滥用
!important会让调试变得不可预测，尤其在组件化开发中容易引发连锁覆盖
实际开发中，行内样式的“高优先级”往往是个陷阱
它确实可靠，但代价是破坏可维护性。比如一个按钮在多个页面用不同背景色，如果靠 style="background: #ff6b35;" 硬写，后期换主题就得全局搜索替换；而用 .btn-primary 类名，改一处 CSS 就全更新。
- React/Vue 中
style={{}}或:style是合理场景，因为它是动态生成的，且 scoped 到组件实例 - 纯静态页面里大量用
style属性，等于把样式逻辑塞进 HTML，违背关注点分离 - 性能上，行内样式无法被浏览器缓存，每次 HTML 加载都要重新解析，而外部 CSS 可复用
!important、行内样式、高特异性选择器混在一起时，你得一层层查 DevTools 的 computed 样式面板，看哪条声明被划掉、为什么被划掉——那才是日常踩坑的起点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
