[class^="ant-"] 是轻量匹配 Ant Design 类名的首选方案，它不依赖 DOM 层级、无需预知具体类名，避免了 [class="ant-btn"] 的完全匹配缺陷，且比 [class*="ant-"] 更精准、比 [class~="el-button"] 更适配状态组合类。
用 [class^="ant-"] 匹配所有 Ant Design 类名
当第三方库不提供 classNamePrefix 配置，又不能改源码时，属性选择器是最轻量的“软拦截”手段。[class^="ant-"] 表示匹配所有 class 属性值以 ant- 开头的元素，它不依赖 DOM 结构层级，也不要求你提前知道具体类名（比如 ant-select__dropdown 是运行时插入的，你根本写不出来）。
常见错误是写成 [class="ant-btn"] —— 这只能匹配 class 值**完全等于** ant-btn 的元素，一旦组件加了多个类（如 ant-btn ant-btn-primary），就失效了。
-
[class^="ant-"]安全匹配所有 ant 开头的类，包括ant-input、ant-modal-footer等 -
[class*="ant-"]更宽泛，能匹配中间含ant-的类（如my-ant-button），但可能误伤，慎用 - 不要嵌套太深，比如
.myapp-form [class^="ant-"] input，权重高且难维护；优先用[class^="ant-"]直接作用于目标元素
为什么 [class~="el-button"] 不适合覆盖 Element Plus
[class~="el-button"] 表示匹配 class 属性中**完整单词**为 el-button 的元素。它看似精准，但 Element Plus 的按钮实际 DOM 往往是 ，这时 [class~="el-button"] 是生效的；可一旦 JS 动态加了 is-disabled 或 is-loading，变成 class="el-button el-button--primary is-disabled"，它依然有效——问题不在这里。
真正的问题是：Element Plus 内部大量使用组合类控制状态，例如 .el-button.is-disabled，而你的 [class~="el-button"] 选择器无法参与这种关系链，没法自然继承或叠加状态样式。你得单独再写 [class~="el-button"][class~="is-disabled"]，维护成本陡增。
- 属性选择器只做“存在性匹配”，不构成 CSS 选择器关系链
- 它无法替代
.el-button.is-disabled这种靠空格连接的复合类语义 - 若库用
:where(.el-button)或:is()做降权处理，属性选择器更难对齐原逻辑
postcss-prefixer 对属性选择器无效，别混用
postcss-prefixer 只处理普通类名、ID 和属性选择器本身，但它**不会重写属性选择器的值内容**。也就是说，你配置了 prefix: "myapp-"，.btn 会变成 .myapp-btn，但 [class^="ant-"] 仍保持原样，不会变成 [class^="myapp-ant-"]。
有人试图靠它“批量前缀化第三方类”，结果发现属性选择器没变、样式依旧泄漏，就是卡在这里。它不是万能重写器，只是选择器层面的字符串前缀注入工具。
-
postcss-prefixer不修改属性选择器内部的字符串字面量（如"ant-"） - 它对
[data-role="tooltip"]、[aria-expanded]等非 class 属性选择器也完全无感 - 若你真要统一前缀，必须手动改写所有属性选择器，或换用构建时 DOM 注入（如 JS 动态加 wrapper class）+ 后代选择器方案
属性选择器 + :where() 降低权重避免覆盖失败
第三方库样式通常权重很高，比如 .ant-btn:hover 是两个类（10+10=20），而你写 [class^="ant-"]:hover 权重是 10+10=20，打平；但若库用了 #root .ant-btn（100+10=110），你就压不过。这时候用 :where() 是个实用技巧：:where([class^="ant-"]):hover 权重恒为 0，彻底让出优先级，靠加载顺序取胜。
这意味着你必须确保你的 CSS 在第三方样式之后加载，否则即使写了 :where()，也会被覆盖。Vite 或 Webpack 中可通过 import 顺序或 style 标签 disabled 后启用控制。
-
:where()内的选择器不贡献权重，适合做“低侵入覆盖” - 它不能用于
:not()内部（语法不支持），别写:not(:where(...)) - 注意兼容性：
:where()在 Safari 15.4+、Chrome 105+ 才稳定，旧项目需评估
复杂点在于：属性选择器看着简单，但它和第三方库的动态类生成、JS 状态驱动、CSS 优先级规则是交织在一起的。最容易被忽略的是——你以为加了 [class^="xxx"] 就万事大吉，其实它根本不管这个元素有没有被 JS 加上 disabled 或 hidden 类，也不管它是不是在 Shadow DOM 里。真要稳，得结合 wrapper block 和加载时机一起控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
