CSS优先级按权重计算：内联样式(1,0,0,0)＞ID选择器＞类/属性/伪类＞标签/伪元素；!important破坏权重但慎用；推荐BEM命名、scoped/CSS Modules隔离样式。
同类元素样式被覆盖时，优先级怎么算
CSS 里两个选择器作用在同一个
上，谁生效不是看写在前面，而是看「权重」。权重由四部分组成：内联样式 > ID 选择器 > 类/属性/伪类 > 标签/伪元素。比如
.container .item 权重是 (0,2,0,0)，而 div.item 是 (0,1,1,0)，前者更高，哪怕后者写在后面也会赢。
- 内联样式如
style="color: red;"权重为 (1,0,0,0)，几乎无法被普通选择器覆盖 -
#nav .active和.sidebar ul li a比较：前者是 (0,1,1,0)，后者是 (0,0,1,3)，前者胜出 - 使用
!important会破坏权重计算，但只该用于调试或第三方库覆盖，生产环境慎用
用父子组合选择器精准锁定目标元素
光靠类名容易误伤，尤其在组件复用或嵌套结构中。.btn 在侧边栏和弹窗里都存在，但想只改弹窗里的按钮颜色，就得加一层上下文约束。
- 推荐写法：
.modal .btn（空格表示后代），比单独.btn权重高，且语义清晰 - 如果只要直接子元素，用
>：.modal > .btn，避免影响深层嵌套的按钮 - 避免过度嵌套，比如
.page .content .list .item .title，既难维护又权重虚高，换成.list-item__title这类 BEM 命名更稳
用属性选择器或伪类区分同类元素状态
同样是 ，登录页和注册页可能需要不同边框色；或者同一组按钮里，只有第一个要圆角左端。这时类名没变，但状态或属性有差异。
- 利用属性：
input[type="email"]、button[data-action="submit"] - 利用位置：
li:first-child、li:last-of-type、li:nth-child(2n) - 注意
:nth-child看的是父元素下所有子元素序号，不是同类元素序号；如果要按同类算，用:nth-of-type更稳妥
层级过深导致维护困难？试试 scoped 或 CSS Modules
当项目变大，靠手写层级选择器容易失控：一个 .card .header h3 可能在多个组件里重复，改一处崩三处。现代前端框架提供了更安全的隔离方式。
