CSS选择器优先级冲突时该如何优化代码结构？-css教程-PHP中文网

根本原因是局部类名与全局类名权重相同（均为类选择器c=1），浏览器按层叠顺序取后者；css modules仅哈希类名，不改变权重，需通过双重类名、父级限定或属性选择器安全提升权重。

css选择器优先级冲突时该如何优化代码结构？

为什么局部样式总被全局样式覆盖？

根本原因不是“CSS模块没生效”，而是局部类名（如 .btn_abc123）和全局类名（如 .btn）权重相同，都是「类选择器」，浏览器按层叠顺序取后者。Vite 的 CSS Modules 只做类名哈希，不改权重——.btn 和 .btn_abc123 都是 c=1，谁写在后面谁赢。

常见错误现象：Button.module.css 里写了 .btn { color: red; }，但页面上按钮还是蓝色；用开发者工具检查发现，全局 global.css 里的 .btn 规则排在后面，直接覆盖了。

别指望 CSS Modules 自动“隔离权重”，它只隔离命名空间
避免把全局样式写成宽泛的 .btn、.title，这是冲突源头
组件内不要依赖“外部类名存在”，比如 div.btn 这种组合在模块化环境下极不可靠

如何用 BEM 命名避免权重堆叠？

BEM 不是为了多写几个下划线，而是让每个类名自带作用域语义，从而天然规避「靠嵌套赢」的陷阱。一个 .card__title--large 就是完整、独立、可预测的单元，不需要靠 .card .title 这种结构去抢权重。

使用场景：React/Vue 组件中，每个视觉元素都应有 Block 或 Element 级类名，不能省略前缀。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

正确：<h2 class="article__heading"></h2>，对应 CSS 中 .article__heading
错误：<h2 class="heading"></h2>，再加个 .article .heading —— 这又回到权重竞争
Modifier（如 --disabled）只表达状态，不用于布局微调；布局该用 --full-width 而非 --disabled

提升局部样式权重的三种安全方式

比起 !important，优先用结构优化提升权重。它不污染全局，也不破坏可维护性。

双重类名：.btn { &.btn { color: red; } } → 权重从 c=1 变为 c=2，稳压全局 .btn
父级限定：.my-button { .btn { color: red; } } → 实际生成 .my-button_abc .btn_def456，权重 c=2
属性选择器：.btn { &[class*="btn"] { background: blue; } } → 同样 c=2，且不依赖 DOM 结构层级

注意：!important 是最后手段。它掩盖问题而非解决——下一次修改就得加两个 !important，或删掉旧规则，没人敢动。