[class^="prefix"] 是字符串前缀匹配，非类名边界匹配，仅对硬编码class属性生效，大小写敏感且不响应动态className赋值，Vue/React中通常失效。
[class^="prefix"] 只匹配 class 属性值以指定字符串开头的元素
它不是“类名前缀”，而是整个 class 属性值的字符串前缀匹配。例如 [class^="btn"] 会匹配 <div class="btn-primary">，但不会匹配 <div class="primary btn">——因为后者 class 属性值以 "primary" 开头。
常见错误是以为它能识别“类名”边界；实际上它把整个属性值当做一个字符串处理，空格、连字符、顺序都直接影响结果。
- 只对硬编码或 JS 显式设置的
class属性生效（如el.setAttribute('class', 'btn-large')），不响应el.className = 'btn-large'后的 DOM 属性自动同步（部分旧浏览器不更新属性） - 大小写敏感：
[class^="Btn"]不匹配class="btn-primary" - 开头有空格就失效：
class=" btn-primary"（首字符为空格）不会被[class^="btn"]选中 - 在 Vue/React 中慎用：框架通常不把 class 写入 DOM
class属性，而是用className或动态 patch，此时该选择器完全不生效
[class~="word"] 才是真正匹配“独立类名”的方式，但它不支持前缀
[class~="btn"] 匹配的是空格分隔后的完整单词，语义等价于 .btn，但它**无法表达“以 btn 开头的类名”**，比如 btn-primary 或 btn-lg 都不会被命中。
如果你的真实需求是“所有带 btn 前缀的类”，说明你已经在用 BEM 或类似命名规范，那 [class^="btn"] 是唯一可行的原生方案——但必须接受它同时会误伤 btn123、btn-text 等非预期值。
立即学习“前端免费学习笔记（深入）”；
- 它和
[class*="btn"]的区别在于更窄的匹配范围（仅开头），但依然属于字符串级匹配，不是语义级 - 不能替代
.btn做通用样式基础；它更适合做“批量初始化”或“调试标记”，比如临时高亮所有 class 以debug-开头的元素 - 若需兼顾语义与前缀，建议用
data-*属性替代：[data-component^="btn"]更可控、无歧义
为什么不用 :is() 或 :where() 配合多个类选择器？
因为它们解决不了“动态前缀”问题。:is(.btn, .btn-primary, .btn-lg) 要求你提前穷举所有可能类名，一旦新增 btn-sm 就得改 CSS——违背维护性原则。
而 [class^="btn"] 是运行时字符串判断，无需预定义，适合构建工具生成类名或 CMS 输出场景。
- 性能上无显著差异，现代浏览器对属性选择器优化充分
- 注意避免宽泛作用域：
div[class^="btn"]比[class^="btn"]更精准，减少不必要的样式计算 - 不要嵌套在
:has()里用，比如section:has([class^="btn"]) ——这类组合在复杂 DOM 下易触发重排，且 Safari 对:has([attr^=x])支持不稳定（截至 2026 年 9 月）
真实项目中更推荐的替代路径
直接用 [class^="btn"] 很快，但长期看容易失控。更健壮的做法是把“前缀意图”显式声明为属性：
- 服务端或组件模板中输出
<button data-role="button" data-variant="primary">，再用[data-role="button"]控制基础样式 - 用 JS 在挂载时扫描
class，提取前缀并写入data-prefix="btn"，CSS 写成[data-prefix="btn"]——这样既保留前缀逻辑，又脱离字符串匹配风险 - 如果必须用 class 前缀，至少约定分隔符，比如统一用
btn--primary，然后用[class^="btn--"]，比[class^="btn"]误命中率低得多
真正的难点不在怎么写选择器，而在如何让 class 的生成逻辑与 CSS 选择逻辑对齐——这往往需要跨角色对齐（设计师、前端、后端），而不是单靠一个 ^= 解决。
