[attr^="value"] 是唯一匹配属性值以指定字符串开头的 css 选择器，严格比对起始位置、不忽略空格、不做子串搜索；如 [class^="btn"] 仅匹配 "btn primary" 而非 "primary btn"，需用 [class~="btn"] 匹配独立类名，[data-id^="user-"] 才正确匹配 data-id 前缀，且受大小写、不可见字符影响。
[attr^="value"] 是唯一能匹配属性值以指定字符串开头的 CSS 选择器，它严格比对属性值的起始位置，不忽略首尾空格，也不做子串搜索。
为什么 [class^="btn"] 经常不生效
因为 class 属性在 DOM 中是一个空格分隔的字符串，[class^="btn"] 要求整个字符串以 "btn" 开头，但真实值往往是 "btn primary"（匹配）或 "primary btn"（不匹配）。它不是用来匹配“类名中含 btn”的工具。
- 想匹配 class 中包含
btn这个独立词，该用[class~="btn"] - 想匹配
data-id以"user-"开头，[data-id^="user-"]才是正解 - 如果属性值开头有不可见空格（如 BOM 或零宽空格），CSS 无法识别，必须用 JavaScript 先清洗再设属性
[href^="https://"] 匹配失败的常见原因
这个写法看似简单，但实际容易因协议格式、大小写或 URL 编码出错：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 只匹配
https://，不匹配HTTPS://（区分大小写），加i标志可忽略：[href^="https://" i] - 不匹配
https:（少一个斜杠）或https//（错字符） - 若链接带查询参数，
^=不关心后面内容，所以href="https://example.com?a=1"仍会命中 - 注意：不能用它匹配
src的相对路径，比如src^="img/"只对显式写出img/xxx.png有效，不适用于./img/xxx.png
^= 和 |=、~= 的关键区别
三者都涉及“部分匹配”，但语义完全不同：
-
[attr^="val"]：纯前缀匹配，要求属性值**从第一个字符开始**就等于指定字符串 -
[attr|="val"]：只用于连字符分隔场景，如[lang|="zh"]匹配lang="zh"或lang="zh-CN"，但不匹配lang="zhCN" -
[attr~="val"]：只认空格分隔的独立单词，[class~="btn"]可匹配class="btn large"，但不匹配class="btn-large"
真正难处理的是属性值里混了不可见字符——CSS 选择器对此完全无感，得靠 JS 提前 normalize 或 trim。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
