内联样式权重固定为1000，远超外链样式的任何选择器权重；浏览器按预设值硬性相加而非比较复杂度，且!important是唯一合法越权手段，但js直接操作style属性仍可覆盖它。
内联样式权重固定为1000，远超外链样式能达成的任何选择器权重
浏览器计算CSS优先级时，不比较“谁更复杂”，而是按预设权重值硬性相加。内联样式（即style属性）被赋予固定权重1000，而外链样式表中哪怕写#app .header nav li.active:hover这种高特异性选择器，其权重也仅为100 + 10 + 1 + 10 + 10 = 131——仍不到1000的一半。
这不是设计缺陷，而是层叠规则的底层约定：HTML结构层（内联）应能无条件覆盖样式层（外链/内部），确保开发者在调试、A/B测试或动态状态渲染时有最终控制权。
外链样式无法靠“堆砌选择器”翻盘，但!important可以临时越权
试图用更多ID或类名提升权重来覆盖内联样式，基本无效。你很难写出权重≥1000的选择器，因为：
- ID选择器单个只计
100，需要10个ID才能到1000，但CSS不允许重复ID，且实际中根本不会这么写 - 类选择器单个仅
10，凑够100个类才到1000，既不可读也不合法（HTMLclass属性值虽支持多类，但语义和维护已崩坏） -
!important是唯一被规范允许的“越权手段”：外部样式中写color: blue !important;可压倒无!important的内联color: red
但注意：!important不是万能解——如果JS后续执行el.style.color = "purple"，它会直接覆盖掉带!important的外部声明，因为内联样式本身也能通过JS注入!important（如el.setAttribute("style", "color: purple !important")）。
真正可持续的解法是彻底避免内联样式参与样式控制
权重之争本质是控制权错配。多数真实项目中的“覆盖混乱”，其实源于JS反复操作element.style.xxx，与CSS类规则形成竞态。推荐做法：
- 把所有视觉状态映射为
class，例如用is-loading代替el.style.opacity = "0.5" - 用
el.classList.toggle("is-hidden")替代el.style.display = "none" - 对必须动态计算的样式（如弹窗定位），封装成独立函数统一管理，而非散落在各处
el.style.left = x + "px"
这样外部CSS只需定义.is-loading { opacity: 0.5; transition: opacity 0.2s; }，既可复用、可动画、可SSR，又绕开了权重战场。
Shadow DOM里内联样式依然权重最高，但作用域被锁死
这是最容易被忽略的边界情况：在Shadow DOM中，style="color: red"照样优先于宿主页面的任何外链样式，但它只影响当前shadow root内的元素。即使你在宿主页写了div { color: blue !important; }，也无法穿透shadow boundary影响组件内部文字颜色。
这意味着——你以为“覆盖成功”的调试结果，可能只在组件内部生效；上线后若组件被复用在不同主题下，这种内联样式反而成了主题隔离的障碍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
