优先使用 CSS 变量接管主题色，其次用 :where() 或 :is() 降权覆盖，避免 !important 和高优先级属性选择器，辅以 data- 属性实现精准控制。
用 :where() 或 :is() 降低重写时的优先级冲突
直接覆盖 CSS 框架组件样式失败，八成是选择器优先级被框架压着。比如 el-button 内部用了 .el-button.is-primary，你写 .my-btn { color: red; } 根本不生效。
真正有效的做法是主动匹配框架的选择器结构，再用现代伪类降权——避免靠加 !important 硬刚：
-
:where()内的选择器不参与优先级计算，:where(.el-button) { color: red; }能安全覆盖，但只兼容 Chrome 105+、Firefox 102+、Safari 15.4+ - 兼容性要求高就用
:is()，它会取内部最高优先级，但比手写冗长选择器轻量，:is(.el-button, .ant-btn) { color: red; } - 别碰
[class*="el-"]这类属性选择器重写，它优先级和类名一样高，还容易误伤
通过框架提供的 CSS 变量（Custom Properties）接管主题色
像 Element Plus、Ant Design、Bootstrap 5+ 都暴露了可覆盖的 CSS 变量，这是最干净的重写路径——不是覆盖样式，而是替换源头值。
例如 Element Plus 的按钮主色由 --el-color-primary 控制，改它比逐个覆盖 .el-button--primary 的背景、边框、文字色省心太多：
立即学习“前端免费学习笔记（深入）”；
- 在根元素或组件 scoped style 顶层写：
:root { --el-color-primary: #1890ff; } - Vue 单文件组件中若用
<style scoped></style>，需配合:deep()或提升到非 scoped 区域，否则变量作用域被隔离 - 注意变量名大小写敏感，
--El-Color-Primary是无效的；不同框架命名风格差异大，查文档确认前缀（如 Ant Design 是--ant-primary-color）
避免在 !important 上反复横跳
一旦开始用 !important 覆盖框架样式，很快就会陷入“谁更 important”的死循环。框架升级后新增的 !important 规则会让你的补丁失效。
- 只在极少数无法绕开的场景用，比如第三方组件库强制内联了
style且没提供变量或插槽 - 如果必须用，把它集中写在单独的
override.css文件末尾，而不是散落在各组件里 - Webpack/Vite 构建时注意 CSS 加载顺序：你的 override 文件必须在框架 CSS 之后引入，否则
!important也白搭
使用 data- 属性做精准作用域控制
当需要对某几个实例特殊处理（比如某个按钮要变圆角，其余保持默认），硬写全局类名会污染其他地方。用自定义属性 + 属性选择器是最可控的方式。
- 模板中加属性：
<el-button data-custom-round>提交</el-button> - CSS 中精准命中：
[data-custom-round] { border-radius: 8px !important; } - 注意 Vue 的响应式更新不会自动同步
data-属性变化，动态增删需用ref+$el.setAttribute() - 不要用
[class~="el-button"]这种方式模拟，它不可靠，且优先级仍可能被框架压制
重写的本质不是对抗框架，而是找到它留出的缝——变量、伪类、属性钩子。漏掉一个，就可能多写二十行无用 CSS。
