@layer是替代!important的现代方案，通过在CSS入口顶部声明层栈（如@layer base, components, overrides），将第三方样式收编至低优先级层、自定义样式置于高优先级层，实现无需权重竞争的可控覆盖。
直接用 !important 覆盖第三方样式，短期能跑通，长期会埋下特异性失控的雷——真正可控的方式是绕过权重战争，从源头控制层叠顺序和作用域边界。
用 @layer 显式声明样式优先级层级
现代浏览器（Chrome 99+、Firefox 97+、Safari 15.4+）已稳定支持 @layer，它是替代 !important 最干净的方案：不是堆选择器或加权重，而是把你的定制样式“提前注册”进一个更高优先级的层。
- 在项目入口 CSS 文件顶部统一声明：
@layer base, components, overrides; - 把第三方库 CSS 放进
@layer base（需其支持或手动包裹），你自己的定制写在@layer overrides - 哪怕选择器权重低，
@layer overrides中的规则也天然高于@layer base中的同名属性 - 注意：Vite / Webpack 的 CSS 加载顺序仍要配合——
@layer声明必须出现在所有被分层的样式之前，否则无效
用 wrapper 容器 + 空格分隔选择器锚定作用域
不改第三方组件代码，只靠外层语义容器建立作用域锚点，是最稳妥的穿透方式。关键在于空格不能丢，且必须依附真实存在的父类。
- Vue 模板中：
<div class="my-form"><ElInput /></div> - 对应 CSS 必须写成：
.my-form :deep(.el-input__inner)（注意:deep()前有.my-form） - 单独写
:deep(.el-input__inner)会被编译器丢弃，不生成任何规则 - React + CSS Modules 下，需显式写
:global(.el-input__inner)，但必须限定在 wrapper 内：.my-form :global(.el-input__inner)
用属性选择器匹配动态类名，避开哈希与运行时生成
当第三方库用 JS 动态拼接类名（如 el-button--medium）或启用 CSS Modules 哈希（css-abc123），类名不可预测，此时类名前缀或固定选择器全部失效。
立即学习“前端免费学习笔记（深入）”；
- 用
[class^="el-button"]匹配开头为el-button的元素（比[class*="el-button"]更安全，避免误伤content） - 务必加上业务容器限定：
.my-dashboard [class^="el-button"]，防止全局污染 - Webpack
css-loader开启modules: true时，需在文件顶部加注释：/* webpackMode: "global" */才能让属性选择器生效 - Vue
<style scoped>不支持属性选择器穿透，必须改用<style module>或显式:global([class^="el-button"])
检查并修正 CSS 加载顺序，比任何选择器都关键
很多 !important 失效，根本不是权重问题，而是你的样式被后加载的第三方 CSS 覆盖了——CSS 层叠里，“后出现”胜过一切。
- Vite 项目中，确认
main.ts的 import 顺序：import 'element-plus/dist/index.css'必须在你项目样式import './style/index.css'之前 - Tailwind 用户：把
@tailwind base和@tailwind components放在最前，@tailwind utilities放最后；第三方库 CSS 应紧接在@tailwind base之后 - HMR 热更新时顺序可能错乱，可在 Vite 配置中加
css.preprocessorOptions.sass.additionalData强制注入全局变量，确保顺序稳定 - 用 DevTools 的
Computed面板看目标属性是否被划掉，再点开“Styles”标签页，观察规则来源时间戳，确认是否真被后加载的 CSS 覆盖
真正难处理的从来不是选择器怎么写，而是第三方组件用了内联样式、Shadow DOM 或 iframe ——这些场景下，CSS 规则再强也进不去渲染树。这时候得切到 JS 层用 element.style.setProperty()，或查文档是否支持 ::part()，而不是继续在 CSS 里死磕。
