CSS优先级按权重计算：内联样式(1,0,0,0)＞ID选择器＞类/属性/伪类＞标签/伪元素；!important破坏权重但慎用；推荐BEM命名、scoped/CSS Modules隔离样式。
同类元素样式被覆盖时，优先级怎么算
CSS 里两个选择器作用在同一个 光靠类名容易误伤，尤其在组件复用或嵌套结构中。 同样是 当项目变大，靠手写层级选择器容易失控：一个 立即学习“前端免费学习笔记（深入）”； 真正麻烦的不是写不出高权重选择器，而是权重堆太高之后，下一个人不敢动、不敢删、改了怕崩——留个注释不如留个可预测的命名规则。.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 可能在多个组件里重复，改一处崩三处。现代前端框架提供了更安全的隔离方式。
，编译后自动添加唯一属性，如 h3[data-v-f3f2d1a2] button.module.css 中的 .primary 编译成 _button_primary_3a2f1 这类唯一类名 :global(.el-input) 这类穿透写法仍会逃逸
