[attr^="value"] 是唯一严格匹配属性值开头字符串的 css 选择器，仅比对整个属性值起始位置，不支持子串、空格忽略或单词拆分，且区分大小写、需引号包裹特殊值。
用 [attr^="value"] 匹配属性值开头的字符串
这是唯一能严格匹配“属性值以某字符串开头”的 CSS 选择器。它不找子串，不忽略空格，也不做单词拆分——只看整个属性值的起始位置是否完全等于给定字符串。
比如 [href^="https://"] 能选中 <a href="https://example.com"></a>，但不会匹配 <a href="http://https.example.com"></a>（因为开头是 http://）；[data-id^="user-"] 可靠，而 [class^="btn"] 很容易失效——因为 class="primary btn" 的属性值是字符串 "primary btn"，并不以 "btn" 开头。
- 值含空格、特殊字符或数字开头时，必须加引号：
[data-name^="2024-"]合法，[data-name^=2024-]会解析失败 - 区分大小写：
[lang^="en"]不匹配lang="EN-US" - HTML 中属性名自动小写，所以
[DATA-ID^="user-"]在标准 HTML 文档里基本不生效
别把 [attr|="val"] 当通用前缀用
[attr|="val"] 看起来像前缀匹配，但它实际是为语言代码设计的：只匹配 val 后紧跟连字符 - 或整个值就等于 val。它等价于 [attr="val"], [attr^="val-"] 的组合，但中间那个 - 是硬性要求。
比如 [lang|="zh"] 可以匹配 lang="zh" 和 lang="zh-CN"，但不匹配 lang="zho" 或 lang="zh_CN"（下划线不行），更不匹配 data-type="user-info"——除非你把它写成 data-type="user-info" 并且确保 user 后面是 - 或结尾。
- 这不是通用前缀方案，强行套用会导致规则静默失效
- 浏览器不会报错，也不会高亮警告，只是样式不应用
- 如果真要用连字符分隔的前缀（如
data-role="admin-sidebar"），优先用[data-role^="admin-"]更直白可靠
为什么 [class^="btn"] 大概率不是你想要的
因为 class 是空格分隔的多值属性，浏览器把整个字符串当作一个值处理。所以 class="btn btn-lg" 的值是 "btn btn-lg"，确实以 "btn" 开头；但 class="primary btn" 的值是 "primary btn"，就不匹配。
真正想匹配“含有 btn 这个独立类名”的场景，应该用 [class~="btn"]——它专为多值属性设计，会按空格切分后逐个比对。
-
[class^="btn"]→ 只命中 class 属性值以 "btn" 开头的元素（如class="btn-primary"） -
[class~="btn"]→ 匹配 class 列表中包含独立 "btn" 的元素（如class="btn primary"或class="primary btn"） - 如果既要前缀又要多值语义，得靠 JS 或预处理器生成 class，CSS 本身不支持混合逻辑
兼容性和性能要注意的点
[attr^="value"] 在 IE8+ 支持，但 IE8 不支持其他扩展语法（如 $=、*=）。现代浏览器都无问题，但性能上要注意：它仍需遍历所有带该属性的元素并做字符串比对，不像类选择器有哈希索引优化。
- 大量节点 + 频繁使用
*=时可能拖慢渲染，^=相对好些，但别在每条规则里滥用 - 路径类匹配（如
[src^="/assets/"]）比加一堆 class 更易维护，前提是路径结构稳定 - 如果值来自 JS 动态注入，注意空格、不可见字符（如
\u200B）会影响匹配结果，建议标准化后再写入 DOM
|= 冒充前缀”这两处。真正要靠前缀驱动样式，先确认属性值是单值、可控、无歧义。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
