^= 是 CSS 属性选择器中的前缀匹配，要求属性值严格以指定字符串开头（区分大小写且忽略前后空格），如 [data-id^="user-"] 匹配 "user-123" 但不匹配 " user-123" 或 "USER-123"。
css 属性选择器 ^= 是前缀匹配，不是“以某字符开头”那么简单
它匹配的是属性值**以指定字符串为起始子串**的元素，且必须从第一个字符开始完全一致。比如 [data-id^="user-"] 会匹配 data-id="user-123"，但不会匹配 data-id=" user-123"（开头有空格）或 data-id="USER-123"（大小写敏感）。
^= 匹配对空白和大小写严格敏感
常见踩坑点：属性值前后有不可见空格、换行或大小写不一致时，^= 直接失效。
- HTML 中写成
<div data-role=" admin">（前面带空格），[data-role^="admin"]不会选中它 -
[class^="btn"]不会匹配class="primary-btn"，因为class属性值是空格分隔的完整列表，不是以btn开头 - 想匹配多个 class 中某个前缀？该用
[class~="btn"]（单词匹配）或 JS 处理更稳妥
和 *=、$= 的关键区别就三条
别混用：^= 只管开头，$= 只管结尾，*= 是任意位置包含。它们之间没有继承关系，也不支持正则。
-
[href^="https://"]→ 必须以https://起始，http://或//都不行 -
[href$=".pdf"]→ 只看结尾，不管前面有没有查询参数，doc.pdf?x=1仍匹配 -
[title*="error"]→"Network error occurred"和"ERROR: timeout"都匹配（大小写敏感）
实际项目中建议优先用 data- 属性 + ^=，避免操作 class
直接靠 class 值做前缀判断容易出错，尤其当框架动态拼接 class（如 React 的 clsx、Vue 的 :class）。用语义化 data- 属性更可控。
立即学习“前端免费学习笔记（深入）”；
[data-section^="sidebar-"] {
background: #f5f5f5;
}
[data-status^="loading"]::after {
content: "…";
}
如果必须处理 class，宁可用 JS 检查 element.classList.contains() 或 className.match(/^btn-/)，比 CSS 属性选择器更可靠。
前缀匹配看着简单，但属性值的生成方式、空格、编码、大小写，每一步都可能让 ^= 静静失效。
