[class^="btn-"] 是 CSS 原生属性选择器，匹配 class 属性值整体以 "btn-" 开头的元素，非 class 列表中的某个 token；它不支持多值中任意 token 的前缀匹配，且对空格和顺序敏感。
用 [class^="btn-"] 选中所有以 btn- 开头的 class
这个属性选择器是 CSS 原生支持的，不需要 JS 或预处理器。它匹配的是元素的 class 属性值「以指定字符串开头」，注意：不是匹配 class 列表中的某个 token，而是整个 class 属性字符串。
常见错误现象：<button class="btn-primary btn-lg"></button> 能被 [class^="btn-"] 匹配；但 <button class="primary-btn"></button> 就不行——因为整个 class 属性值是 "primary-btn"，不以 "btn-" 开头。
- 必须写成
[class^="btn-"]，不能省略引号（尤其当值含连字符时） - 它对空格敏感：
class=" btn-primary"（开头有空格）就匹配失败 - 如果元素有多个 class，只要整个
class属性字符串以btn-起始，就能命中
[class^="btn-"] 和 .btn-* 的本质区别
CSS 没有 .btn-* 这种通配类语法，那是 Sass/Less 等预处理器的写法，编译后会生成一堆具体规则，比如 .btn-primary、.btn-danger……而 [class^="btn-"] 是运行时匹配，完全动态，哪怕 class 是 JS 动态拼接出来的（如 el.className = "btn-" + type），只要最终属性值符合前缀规则，样式就生效。
- 原生 CSS 中，
.btn-*是非法语法，浏览器直接忽略 -
[class^="btn-"]兼容 IE7+，但性能略低于普通类选择器（需遍历属性字符串） - 如果同时存在
.btn和[class^="btn-"]，后者优先级更高（属性选择器 vs 类选择器，权重相同，但后者更具体）
当 class 是多值且前缀不在最左时，[class^="btn-"] 失效怎么办
比如 <button class="action btn-primary"></button>，此时 class 属性值是 "action btn-primary"，不以 "btn-" 开头，[class^="btn-"] 就无能为力。
立即学习“前端免费学习笔记（深入）”；
解决方案只有两个：改 HTML 结构，或换选择器逻辑。
- 推荐做法：统一 class 顺序，让前缀类始终在最前，如
class="btn-primary action" - 次选：用
[class*="btn-"]（包含匹配），但它会误伤class="sub-btn-primary"这类反例 - 更稳妥但稍重：用
:is(.btn-primary, .btn-danger, .btn-warning)（现代浏览器），或配合 JS 动态加统一父类
为什么不用 [class~="btn-"]？它和 ^= 有什么不同
[class~="btn-"] 是「全词匹配」，要求 class 属性中存在一个**完整、独立**的 token 等于 "btn-"。但 "btn-" 本身不是合法 class 名（CSS class 不允许以连字符结尾），所以这个选择器永远不生效。
真正想做「匹配 class 列表中任意一个以 btn- 开头的 token」，CSS 原生做不到——这是关键限制。
-
[class~="btn-primary"]可以匹配class="btn-primary"或class="btn-primary icon" - 但没有
[class~="btn-*"]或[class^="btn-"]对 class 列表中每个 token 分别判断的机制 - 所以实际项目中，要么靠约定 class 顺序，要么接受
[class^="btn-"]的局限性
真正麻烦的地方在于：你得时刻意识到，这个选择器匹配的是 attribute 字符串，不是 DOM classList 的语义化结构。一旦 class 顺序或空格控制不好，样式就断了，而且不容易 debug。
