硬加前缀（如myapp-ant-btn）必然失效，因其破坏第三方库内部依赖精确类名组合的选择器链，导致.is-disabled、__popper、:focus-visible等动态状态样式全部失灵；正确做法是用带业务语义的wrapper block（如.myapp-form-field--date）配合空格后代选择器隔离作用域。
直接给第三方类名加项目前缀（如 myapp-ant-btn）必然失效，这不是权重问题，而是破坏了库内部的选择器链和运行时状态匹配逻辑。
为什么硬加前缀会让按钮禁用态、浮层位置、focus-visible 全部失灵
Ant Design 的 .ant-btn.is-disabled、Element Plus 的 .el-select__popper 都依赖精确的类名组合与 DOM 层级。你把 .ant-btn 改成 .myapp-ant-btn，CSS 规则就再也匹配不上这些动态生成或 JS 控制的类。
- 常见错误现象：
.ant-btn.is-disabled不生效 → 按钮看起来可点但实际禁用 -
.el-select__popper样式丢失 → 下拉菜单弹出位置错乱或无阴影 -
.ant-btn:focus-visible被忽略 → 键盘导航时焦点样式消失 - 构建产物中大量 CSS 规则显示 strikethrough → DevTools 里查不到命中来源
正确做法：用带业务语义的 wrapper block 切断作用域
所有定制样式必须以一个明确的容器类为父级，中间用空格分隔，不拼接、不嵌套、不越界。
- HTML 层只加一层包裹：
<div class="myapp-form-field--date"><datepicker></datepicker></div> - CSS 中必须写成：
.myapp-form-field--date .ant-picker-input input（注意空格！） - 禁止写成：
.myapp-form-field--date.ant-picker-input（语义错误）或.myapp-form-field--date .ant-picker-input:focus:hover（过度具体，未来失效） - 这个
myapp-form-field--date必须同时出现在 HTML、CSS、构建配置（如 Webpack alias 或 Vite resolve）中，漏掉任意一层，隔离即失效
当 wrapper 无法包裹时（如全局 message、notification），用属性选择器软拦截
对无法控制 DOM 结构的第三方组件（比如 Ant Design 的 message.error() 弹窗），只能靠 CSS 属性选择器做轻量级限定，但必须加作用域前缀。
- 安全写法：
.myapp-ui [class^="ant-"]或.myapp-ui [class^="el-"]（^=表示“开头匹配”，避免误伤plant、content等） - 危险写法：
[class*="ant-"]（裸用，无作用域限制，极易污染） - Webpack + CSS Modules 场景下，需在文件顶部加注释：
/* webpackMode: "global" */ - Vue
<style scoped></style>中不能直接用属性选择器穿透，必须改用<style module></style>或显式写：:global([class^="ant-"]) { ... }
样式加载顺序比 !important 还关键
很多开发者写了 !important 仍盖不过第三方样式，根本原因不是权重不够，而是 CSS 文件加载顺序错了——后加载的 CSS 天然覆盖先加载的，哪怕前者带 !important。
- Vite 项目中检查
main.ts：import 'element-plus/dist/index.css'必须在import './style/index.css'之前 - React + CSS Modules 中，确保你的
MyComponent.module.css是在第三方 CSS 之后注入的（可通过useEffect动态 import 验证） - 不要依赖
:global()或:deep()来“强行提权”，它们解决的是作用域穿透，不是加载时机
真正难的不是写出正确的选择器，而是守住「不碰第三方 class 属性」这条线——一旦开始手动加前缀、拼类名、插 !important，后续每次库升级都会变成回归测试噩梦。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
