第三方CSS污染全局样式的根本解法是“重置+局部作用域强化”：为容器设唯一class（如third-party-sandbox），兜底重置font-family、color等继承属性，用属性选择器和子选择器提升权重，对挂载到body的模态框需通过getContainer或DOM监听移入沙箱，并显式重设字体防止继承泄漏。
第三方CSS污染全局样式怎么办
直接用 scoped 或 Shadow DOM 最省事，但多数第三方库（比如 react-datepicker、quill）不支持，也没法改源码。这时候靠纯 CSS 隔离，核心就一条：**不靠“限制”，而靠“重置 + 局部作用域强化”**。
常见错误是只加个外层 div#editor-wrapper 就以为万事大吉，结果 .ql-toolbar button 还是干掉了你页面里的所有 button 样式——因为优先级不够，且没重置继承链。
- 必须给容器加唯一 class（如
third-party-sandbox），不用 ID（ID 选择器无法复用，也不利于 SSR） - 在它内部对常用基础标签做“兜底重置”：
font-family、color、line-height、margin、padding等，否则字体/间距会从外部漏进来 - 用属性选择器或子选择器主动压低第三方规则权重，比如：
.third-party-sandbox [class*="ql-"]比.ql-toolbar优先级高
后代选择器覆盖不了 .modal.show 怎么办
很多库（如 Bootstrap、Ant Design）用 .modal.show 这类高频 class 直接挂 body 下，根本不在你的容器里。后代选择器天然失效——.my-wrapper .modal 根本匹配不到。
这不是写法问题，是 DOM 结构问题。必须干预渲染位置或接管样式控制权：
立即学习“前端免费学习笔记（深入）”；
- 查文档看是否支持
getContainer/appendTo配置（如 Ant Design 的getPopupContainer、React-Bootstrap 的containerprop），把它塞进你的.third-party-sandbox内 - 如果不行，用
document.body监听新增节点，发现.modal就立刻element.classList.add('third-party-sandbox')，再补一版针对该 class 的重置 CSS - 避免用
!important硬顶——它会让后续维护崩溃，尤其当你自己也要动态改z-index或display时
为什么 :where() 和 :is() 不能解决这个问题
:where(.third-party-sandbox) .ql-editor 看似能降权，但它只是让选择器本身权重归零，**不改变匹配范围**。只要第三方样式没加同级限定，它照样生效；而且 :where 不支持 IE，:is 在老版 Safari 有 bug，实际兼容性比手写前缀还差。
真正有用的是组合策略：
- 用
[class^="third-party-"]或[data-sandbox]这类属性选择器起步，比 class 选择器权重略高 - 对关键样式加多一层上下文，比如把
.ql-editor p改成.third-party-sandbox .ql-editor > p（用 > 强制子元素，防嵌套穿透） - 第三方用了
!important？你也得用，但只限具体值，例如color: var(--text-primary) !important，别全量 !important
React/Vue 里用 CSS Modules 还需要手动隔离吗
需要。CSS Modules 只管你写的样式，不管第三方组件内部的 style 标签或内联 className。比如你在 Vue 里 <quilleditor></quilleditor>，它内部还是注入 .ql-toolbar 到 head，照样污染全局。
此时 Modules 的局部 class 对第三方无感，必须双管齐下：
- 给组件外层套
<div class="third-party-sandbox"><quilleditor></quilleditor></div> - 在全局 CSS（非 Modules）里写
.third-party-sandbox开头的重置规则 - 如果框架支持，开启
css: { modules: true }同时保留一个global.css专放沙箱规则
最易被忽略的是字体继承——哪怕所有 class 都隔离了，body { font-family: Inter; } 仍会透进第三方编辑器里，导致字号/字重错乱。必须在 sandbox 容器上显式重设 font-family 和 font-size。
