第三方插件CSS覆盖自己样式怎么办
直接加 !important 是最常见反应，但治标不治本，尤其当插件动态插入样式或重绘时，你的 !important 可能被后加载的同权重规则盖掉。真正有效的做法是提升你样式的「层叠顺序」——不是靠暴力，而是靠位置和 specificity。
- 优先用
<style></style>标签内联在末尾（紧贴），比外部 CSS 文件加载更晚，天然层叠权重更高 - 避免用类名复用插件已有的选择器（比如都用
.btn），哪怕加了!important，插件后续 JS 动态加的style属性（style="color: red"）仍会赢 - 改用更具体的选择器：插件写
.modal，你就写body .my-app .modal或#app .modal，增加 specificity 而不依赖!important
为什么
不是 <style></style> 本身有魔法权重，而是浏览器解析顺序决定的：所有 <link rel="stylesheet"> 默认是异步加载、阻塞渲染但不保证执行顺序；而内联 <style></style> 是同步解析、立即生效，且 DOM 中越靠后的样式表，层叠优先级越高（同 specificity 下）。
- Chrome/Firefox/Safari 都遵循「后声明胜出」原则，
<style></style>放在前，就大概率压过所有外部 CSS - 注意：如果插件用
document.write或append(<style>)</style>动态注入样式，它可能出现在你之后——这时你需要监听或延迟自己的样式注入，而不是硬刚 - Webpack/Vite 等构建工具打包的 CSS，常被插入到
开头，所以手动加的<style></style>放结尾才有效
哪些场景下
遇到插件用 style 属性内联样式（如 <div style="display: none">）、Web Component 的 Shadow DOM、或用 <code>getComputedStyle + 强制重绘的 JS 行为，<style></style> 就完全失效了。
-
style属性的优先级高于任何外部或内联 CSS（包括!important），唯一办法是用 JS 覆盖：例如el.style.display = 'block' - Shadow DOM 内部样式不会受全局
<style></style>影响，必须通过::part()、::theme()（如支持）或插件文档提供的主题 API 调整 - 某些富文本编辑器（如 TinyMCE、CKEditor）会把内容包裹在 iframe 里，你的主页面
<style></style>对 iframe 内容无效，得走插件配置项注入 CSS
一个安全又轻量的实操模板
别堆 !important，也别全量覆盖插件 CSS。用最小侵入方式控制关键节点：
立即学习“前端免费学习笔记（深入）”；
<head>
<!-- 其他 link -->
<link rel="stylesheet" href="plugin.css">
<!-- 放在这里：紧贴 /head -->
<style>
/* 提升 specificity，不滥用 !important */
.my-app .plugin-modal-header {
background-color: #2563eb !important;
padding: 1rem;
}
/* 针对插件动态添加的 class */
.plugin-modal.show .plugin-backdrop {
opacity: 0.85;
}
</style>
</head>关键是把 .my-app 这类根容器 class 加在前面——既避免污染全局，又确保 specificity 超过插件原始规则。插件更新后只要没改 class 名，这套就还能稳住。
真正麻烦的从来不是怎么写 CSS，而是搞清插件到底在哪个时机、用什么机制注入样式。打开 DevTools 的 Elements 面板，盯着 和 里新冒出来的 <style></style> 或 style 属性，比查文档快得多。
