CSS权重按四位数(a,b,c,d)计算：id=100、class/attribute/pseudo-class=10、element/pseudo-element=1，内联样式=1000；!important仅临时使用，BEM/CSS Modules通过命名隔离避免冲突。
class 和 id 选择器的权重怎么算，别靠猜
浏览器不是按“谁写在后面就赢”，而是严格按四位数权重（a,b,c,d）加权计算：id 算 100，class / attribute / pseudo-class 各算 10，element / pseudo-element 各算 1。内联样式是 1000，但你几乎不该用它。
比如 #nav .item.active:hover 权重是 (0,1,2,1) → 121；而 div#nav ul li:first-child 是 (0,1,0,4) → 104 —— 前者更高，哪怕后者元素更多。
- 用
!important是临时止血，不是解法；它会破坏可维护性，尤其在多人协作时 -
[type="text"]和.form-input权重一样（都是 10），别以为属性选择器“更具体” - 伪类如
:not()本身不加权，但里面的内容要算：:not(.disabled)算 10，:not(div)只算 1
为什么加了 class 还不生效？检查是否被父级 id “压制”
ID 选择器权重太高（100），一个 #app 就能压垮一串 .button .primary .large .hover（合计才 40）。常见于框架封装组件或老项目中全局 ID 布局。
- 查 DOM：右键元素 → “检查”，看 computed 样式里哪些规则被 strikethrough，点开对应 rule 查它的选择器权重
- 临时验证：把目标 class 提升为
body #app .my-button，如果生效了，说明确实是父级 ID 溢出影响 - 解法不是删 ID，而是改写法：用
[data-role="button"]替代#submit-btn，权重降为 10，更可控
用 BEM 或 CSS Modules 是为了绕开权重战争，不是为了“时髦”
手写 .header__title--large 或用 import styles from './Button.module.css'，本质都是让每个 class 名全局唯一、语义封闭。这样你永远只比 class 对 class，不再和别人家的 #sidebar 打架。
立即学习“前端免费学习笔记（深入）”；
- BEM 要求块名必须出现：
.card可以，.title不行；否则容易撞名，反而埋坑 - CSS Modules 的
styles.button编译后变成Button_button__abc123，天然隔离，但要注意动态 className 拼接时别漏掉styles对象 - 不要混合：别在一个组件里一半用 BEM，一半用
id控制样式，那等于自己造战场
inline-style 和 style attribute 的优先级陷阱
style="color: red" 权重是 1000，比任何外部 CSS 都高——但它不是“更权威”，只是浏览器渲染层的硬覆盖。一旦你用 JS 动态设 el.style.color = 'blue'，它就会覆盖掉所有 class 里的 color，哪怕那个 class 是 #root .ui .button .primary（131）。
- React/Vue 中避免直接操作
el.style，优先走 state 驱动 className 切换 - 需要动态颜色/尺寸时，用 CSS 自定义属性：设
--btn-bg: blue，再用background: var(--btn-bg)，既可 JS 控制，又不破权重规则 - 第三方库插入的 inline-style（比如某些 tooltip 组件），用
!important强顶是下策；更好的方式是用更高权重的选择器 +!important，或者 hook into 它的 className API
权重冲突从来不是“谁更懂 CSS”，而是谁更早意识到：命名即约束，选择器越短、越孤立、越少依赖上下文，就越不容易被意外覆盖。最麻烦的不是算错权重，是某天发现 .modal 在另一个页面突然变宽了——因为有人在 footer 里写了 div.modal { width: 100% }，而你根本没注意到那个 div。
