body前缀提权常失效，因其仅提升权重d位+1，而第三方库多用高权重选择器（如0-1-2-1），且动态后加载；应改用唯一业务容器类替代body，并配合构建工具自动加前缀，同时注意内联样式、shadow dom和iframe等场景需换思路。
为什么body前缀提权经常失效
直接写 body .my-btn 只给选择器权重加 1（d 位+1），而现代第三方库早用 div#root .ant-modal .ant-btn 这类 0-1-2-1（121）规则，body 根本压不住。更麻烦的是，插件样式常动态 append(<style>)</style>，后加载 + 高权重 = 双重压制。
常见错误现象：body .btn-primary 在 DevTools Styles 面板里被划掉，但 .ant-btn-primary 明明没写 ID 或多层嵌套——其实它用了属性选择器如 button[type="button"].ant-btn（权重 0-0-2-1），已经比你高。
- 别依赖
body，它语义泛、影响广，可能误改弹窗按钮或侧边栏链接 - 权重提升必须落在「业务上下文」上，不是越宽泛越有效
- 检查插件真实选择器：右键元素 → Elements → Styles 面板点开被划掉的规则，看它的完整路径
用唯一容器类替代body实现可控提权
真正有效的做法是把第三方组件装进一个带业务标识的外层容器，再统一加前缀。比如 HTML 里写 <div class="my-project-sandbox">...</div>，然后所有自定义样式都基于这个类展开。
构建时自动加前缀比手动堆 .my-project-sandbox .card .title 更可靠，也避免漏写：
- Vite 用户装
vite-plugin-css-prefix，配置prefix: '.my-project-sandbox '（注意末尾空格） - PostCSS 用户用
postcss-prefix-selector，务必设exclude: [/^\.my-/]，否则会把.my-btn错转成.my-project-sandbox .my-btn - 容器类名必须全局唯一，不能和插件类名撞车（比如别叫
ant-sandbox）
:global()在CSS Modules里怎么写才不白写
CSS Modules 中直接写 .ant-btn 不生效，因为编译后类名被哈希化，浏览器根本找不到原始类名。必须用 :global() 穿透作用域，但语法极易出错。
正确写法只有一种：:global(.ant-modal .ant-modal-header) { padding: 16px; }。常见错误包括：
-
.wrapper :global(.ant-modal)——:global()不能嵌在局部选择器里 -
:global(.ant-modal) .ant-modal-header—— 后半段又掉回模块作用域，找不到 -
:global( .ant-tabs-tab { background: red; } )—— 括号里不能塞 CSS 块，语法非法
动态挂载到 document.body 的组件（如 Ant Design Modal）还要额外注意：确保 .module.css 在入口或 Layout 层提前 import，否则样式还没加载，DOM 就已插入。
哪些情况连容器前缀都救不了
遇到这三类情况，任何选择器权重策略都会失效，必须换思路：
- 插件用内联
style属性（如<button style="color: #1890ff"></button>），权重 1000，高于所有 CSS 选择器 - 插件渲染到 Shadow DOM（DevTools 里看到
#shadow-root），外部 CSS 默认不可穿透，得用::part()或官方主题 API - 插件内容在 iframe 里（如 TinyMCE），你的主页面
<style></style>对 iframe 内容完全无效，必须走插件配置项注入 CSS
最常被忽略的一点：不是所有“覆盖失败”都是权重问题。先打开 DevTools 的 Styles 面板，确认那条样式是不是被划掉了；如果没被划掉，只是没生效，大概率是属性不继承、display 被重置、或 transform 导致视觉偏移——权重只是第一关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
