内联样式权重（1000）最高，外部选择器无法通过增加类名等提升权重超越；!important是唯一合法覆盖手段，但应慎用，优先通过css变量、data属性或框架生命周期控制接管样式。
内联样式权重是1000，任何外部选择器（哪怕写成 html body div#app .container > ul li a:hover）都不可能靠权重反超它——这不是你选择器不够“狠”，而是CSS规范根本没给这条路。
为什么加再多类名也压不住 style 属性
CSS 权重计算是四元组 (a,b,c,d)，其中内联样式独占 a=1 位，其他选择器最多影响 b（ID）、c（类/属性）、d（标签）。只要元素带 style 属性，a 就是 1，而外部规则的 a 永远是 0。比较时从左到右，1 > 0 直接判负，后面再堆多少类名都无效。
-
#header .nav li.active[data-state="open"]::before权重是(0,1,4,2)，仍输给style="color:red"的(1,0,0,0) - 用
:is()或:where()包裹也不会提升权重，:is(.a, #b) .c权重等同于#b .c，不是叠加 -
[style]伪类只有权重 10，它连匹配都靠不住，更别说覆盖 —— 它不读取style里的值，只看有没有这个属性
什么时候该用 !important，什么时候不该
!important 是唯一合法、稳定覆盖内联样式的手段，但它不是“补丁”，而是信号：你在和无法修改的 DOM 打交道。
- 该用：第三方轮播库（如 Owl Carousel）注入的
style="width: 400px;"；CMS 输出的不可编辑 HTML；框架在 SSR 阶段硬写的style - 不该用：自己写的 React 组件里传
style={...}却不改用className；Vue 模板里写:style="{ opacity }"却不抽成.is-faded类 - 必须配高特异性选择器一起用，比如
.carousel__item.active[aria-selected="true"] { width: auto !important; }，而不是.carousel__item { width: auto !important; }
比 !important 更干净的替代路径
真正省事的办法，是让 style 根本不出现，或让它可被 CSS 接管。
- 把 JS 动态设置的
element.style.width = w + "px"改成element.dataset.width = w，再用[data-width] { width: attr(data-width px) !important; }（注意：attr() 值需配合!important才能生效） - 用 CSS 变量中转：HTML 写
style="--item-width: 400px;"，CSS 写.item { width: var(--item-width); }，后续只需改变量值 - React/Vue 中禁用
styleprop，统一走className+ BEM 命名，例如class="card card--wide"对应.card--wide { max-width: 800px; }
最常被忽略的一点：很多所谓“覆盖不了”的内联样式，其实来自 JS 框架的响应式更新，它会在你写完 CSS 后几毫秒内重新写一遍 element.style。这时候光加 !important 没用，得在框架生命周期里找时机同步 class 状态，或者用 MutationObserver 监听并清理 —— 覆盖只是表象，接管才是解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
