CSS中[class^="prefix"]只匹配class属性值开头的字符串，不按独立class名匹配；要精确匹配以某字符串开头的class名，必须用JavaScript遍历element.classList并调用startsWith()。
用 [class^="prefix"] 匹配 class 名以字符串开头
直接用属性选择器的 ^= 操作符即可，它表示“属性值以指定字符串开头”。注意：这里匹配的是整个 class 属性的原始字符串，不是单个 class 名。
比如 HTML 是 <div class="btn-primary disabled">，那么 <code>[class^="btn"] 能匹配，但 [class^="disabled"] 不能——因为 class 属性值是以 "btn-primary" 开头，不是 "disabled"。
-
[class^="icon-"]会匹配<span class="icon-home user"></span>，但不匹配<span class="user icon-home"></span> - 它对空格敏感，class 列表顺序决定是否命中
- 不区分单词边界，
[class^="btn"]也会匹配class="btn-lg btn-block"，但不会匹配class="primary-btn"
想按“独立 class 名”开头匹配？得用 [class~="value"] 组合
~= 是“包含指定单词”的操作符，但它只匹配完整单词，无法直接表达“以某字符串开头的单词”。所以得组合使用：
例如匹配所有 class 名以 icon- 开头的元素，可靠写法是：[class~="icon-"], [class~="icon-home"], [class~="icon-user"], ...——显然不可扩展。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 没有“class 单词前缀匹配”的原生语法（
^=作用于整个属性值，~=只做全词匹配） - 如果 class 命名规范且数量可控，可手动列出常见变体
- 更实际的做法是加一个统一前缀 class，如
data-icon-type="home"，再用[data-icon-type]或[data-icon-type^="icon-"]
JavaScript 辅助更灵活：用 element.classList 遍历判断
当必须精确匹配“某个 class 名以指定字符串开头”，CSS 做不到时，JS 是最直接的解法：
document.querySelectorAll("*").forEach(el => {
const hasPrefixClass = [...el.classList].some(cls => cls.startsWith("icon-"));
if (hasPrefixClass) el.style.color = "blue";
});
-
el.classList返回 DOMTokenList，转成数组后可用startsWith()精准判断每个 class 名 - 比正则或
className.includes()更安全，避免子串误匹配（如"btn"不会误中"subtle-btn"） - 性能上，遍历全量元素较重；建议缩小范围，如
document.querySelectorAll(".widget")
为什么不用 :is([class*="icon-"]) 或正则？
*= 是“包含子串”，风险很高：[class*="icon-"] 会错误匹配 class="action-icon disabled"（因为 "action-icon" 含 "icon-"），甚至匹配 class="iconic"。
- CSS 选择器不支持正则表达式，
:is()、:where()等函数也不能绕过这个限制 - 部分预处理器（如 Sass）可生成多个选择器，但仍是静态枚举，非运行时匹配
- 真正动态、健壮的前缀 class 匹配，终究要靠 JS 的
classList+some()组合
class 属性值的空格分隔特性，让纯 CSS 很难兼顾简洁与准确——多数人卡在这一步，是因为默认以为 ^= 作用于每个 class，其实它只看整个字符串开头。
