应降低选择器权重而非提权：多层嵌套如 .modal .dialog .content h2 权重为 (0,0,3,1)，远超单类 .h2-title 的 (0,0,1,0)；推荐用属性选择器 [data-role="section-title"] 或 bem 类名替代，提升可维护性与稳定性。
直接降低选择器权重，而不是硬碰硬提权——高优先级选择器本身不是问题，问题在于它让后续覆盖变得不可控、不可预测。
为什么 .modal .dialog .content h2 难以被覆盖
这种多层嵌套选择器的权重是 (0,0,3,1)，而你写的 .h2-title 只有 (0,0,1,0)。浏览器不是“看谁更长”，而是算四元组：每多一个类或标签就加 10 或 1。一旦对方堆了三个类，你单加一个类根本追不上。
- 检查 DevTools Styles 面板里被划掉的规则，悬停看提示 specificity is lower than another rule —— 后面跟着的数字就是真实权重
- 别用「再套一层父容器」来提权，比如写
.page .modal .dialog .content h2，这只会让问题滚雪球 - 第三方组件库（如 Ant Design、Element Plus）大量使用这类嵌套，你自己的样式几乎不可能靠堆类赢
用属性选择器或业务类名替代嵌套提权
属性选择器 [data-ui="heading"] 和类选择器权重相同，但语义明确、不易被意外匹配；业务类名如 .user-profile__title 比 .modal .dialog .content h2 更稳定、更易维护。
- 把
.modal .dialog .content h2替换为h2[data-role="section-title"]，权重仍是 (0,0,1,1)，但不再依赖 DOM 结构深度 - 在 HTML 中加业务属性：
<h2 data-role="section-title">...</h2> - BEM 命名如
.dialog__header-title是独立类，不依赖父元素，权重可控且可复用
Vue/React 项目里 scoped 样式导致的“假覆盖”
你写的 .card .title 在 Vue 的 <style scoped></style> 下会被编译成 .card[data-v-abc123] .title[data-v-abc123]，而 JS 动态插入的样式没带这个属性，根本匹配不到真实 DOM。
- 动态注入样式时，必须同步带上对应属性，例如用
document.createElement('style')插入时，手动加data-v-abc123属性 - 更稳妥的方式是改用 CSS Modules 或全局类 +
:global(.card .title)显式声明作用域 - 检查 Elements 面板中目标元素的真实 class 和属性，确认是否多了哈希后缀
真正难覆盖的从来不是样式本身，而是选择器背后隐含的结构假设——一旦 DOM 层级变动或框架注入属性，高权重嵌套就变成脆性依赖。优先用显式类名、属性标记和变量接管，比在 specificity 上较劲靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
