CSS优先级按权重计算：内联样式(1,0,0,0)＞ID选择器＞类/属性/伪类＞标签/伪元素；!important破坏权重但慎用；推荐BEM命名、scoped/CSS Modules隔离样式。

同类元素样式被覆盖时，优先级怎么算

CSS 里两个选择器作用在同一个 <div> 上，谁生效不是看写在前面，而是看「权重」。权重由四部分组成：内联样式 > ID 选择器 > 类/属性/伪类 > 标签/伪元素。比如 <code>.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="text">，登录页和注册页可能需要不同边框色；或者同一组按钮里，只有第一个要圆角左端。这时类名没变，但状态或属性有差异。

• 利用属性：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 可能在多个组件里重复，改一处崩三处。现代前端框架提供了更安全的隔离方式。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

立即学习“前端免费学习笔记（深入）”；

• Vue 单文件组件中加 <style scoped></style>，编译后自动添加唯一属性，如 h3[data-v-f3f2d1a2]
• React 用 CSS Modules，把 button.module.css 中的 .primary 编译成 _button_primary_3a2f1 这类唯一类名
• 不依赖全局层级，也就不怕同类元素冲突，但要注意：:global(.el-input) 这类穿透写法仍会逃逸

真正麻烦的不是写不出高权重选择器，而是权重堆太高之后，下一个人不敢动、不敢删、改了怕崩——留个注释不如留个可预测的命名规则。