应优先通过框架支持的变量覆盖、配置项或class透传解决样式冲突，仅在无替代方案时才用更高特异性选择器、:where()归零权重或scoped/module CSS隔离。
用更具体的CSS选择器提升权重
框架样式权重高，往往是因为用了 .btn-primary、div.container 甚至 #app .card .header 这类多级嵌套选择器。单纯写 .my-btn 肯定压不过它。解决办法不是硬刚，而是“比它更具体”：
- 如果框架用的是
.btn.btn-primary，你就写.my-module .btn.btn-primary或section .my-btn - 避免无意义嵌套，比如不要为了提高权重而写
body div div div .my-btn—— 可维护性会崩 - 利用 HTML 结构中的唯一上下文，比如组件外层加个带语义的 class：
<div class="user-profile-card"><button class="edit-btn"></button></div>，然后写.user-profile-card .edit-btn
利用CSS自定义属性（CSS Custom Properties）接管样式变量
很多现代框架（如 Bootstrap 5+、Tailwind、Ant Design）已支持 CSS 变量覆盖。这不是“覆盖样式”，而是“提前注入设计意图”，比后置覆盖更干净：
- 检查框架文档是否导出
--bs-primary、--ant-primary-color等变量 - 在
:root或更高层级作用域中重设：:root { --bs-primary: #5b21b6; --bs-btn-padding-y: 0.375rem; } - 注意作用域：若只改局部组件，用
.my-component { --bs-primary: #8b5cf6; }，变量会自然向下继承 - 变量不生效？确认是否在框架 CSS 加载之后引入你的 CSS，或用
!important仅限此处（这是极少数可接受的例外）
调整样式加载顺序 + 使用 :where() 降低权重干扰
CSS 权重相同的情况下，后声明的规则胜出。但盲目把自定义 CSS 放最后，可能被框架的动态插入样式（如 emotion、styled-components 的 runtime 注入）反超。这时候要主动控制：
- 确保你的 CSS 文件在框架 CSS 之后 link 或 import（查看浏览器 Elements 面板确认顺序）
- 如果框架用了高权重选择器如
html body .container，而你只想微调又不想拉高自己权重，可用:where()“归零”权重：:where(.my-btn) { color: #1e40af; background: #dbeafe; }——:where()内的选择器不增加权重，适合做基础重置 - 注意兼容性：
:where()在 Safari 15.4+、Chrome 101+、Firefox 100+ 支持；老版本需降级为普通选择器
用 scoped / module CSS 隔离而非对抗
如果你在 Vue、React（配合 css-modules）、Svelte 等环境中开发，别跟全局样式死磕。框架级样式冲突的本质，是作用域混乱：
立即学习“前端免费学习笔记（深入）”；
- Vue 单文件组件用
<style scoped></style>，它会自动给元素加 data 属性，并给选择器追加对应属性选择器，天然隔离 - React 推荐 css-modules：
import styles from './Button.module.css'，类名被哈希化，完全不参与全局权重竞争 - 注意：scoped/style 不解决第三方组件库内部样式（比如
<el-button></el-button>），此时应回退到变量覆盖或提供classprop 透传
真正难的不是写出能覆盖的 CSS，而是判断该不该覆盖——有些样式本就该由框架统一管控，强行覆盖反而导致暗坑。优先查文档看是否支持配置、变量、插槽或 class 透传；只有当这些路径都走不通时，再动用选择器特异性或加载顺序这类底层手段。
