属性选择器[attr^="value"]匹配属性值严格以指定字符串开头（区分大小写、不可有前置空格）；[attr$="value"]匹配严格以指定字符串结尾；[attr="value"]表示完全相等（含空格大小写），非包含匹配；子字符串匹配应使用[attr*="value"]。
属性选择器 [attr^="value"] 匹配开头
这个选择器检查元素的 attr 属性值是否**严格以指定字符串开头**，区分大小写，且必须是完整属性值的起始位置。
常见误用：以为能匹配单词边界或子字符串，比如 [class^="btn"] 会选中 class="btn-primary"，但不会选中 class="my-btn"（因为不是“以 btn 开头”，而是以 my- 开头）。
实操建议：
- 适合用于统一前缀的自定义属性，如
data-api-url^="https://api.example.com" - 注意空格影响：如果属性值有前置空格（如
class=" btn-primary"），^=就不匹配 —— HTML 解析后空格属于值的一部分 - 不能省略引号，
[attr^=value]在某些浏览器中可能解析失败，始终写成[attr^="value"]
属性选择器 [attr$="value"] 匹配结尾
它要求属性值**严格以指定字符串结尾**，同样区分大小写、不忽略首尾空格，且必须是整个属性值的末尾。
典型场景：筛选特定后缀的资源链接或文件类型：
-
a[href$=".pdf"]可匹配href="report.pdf"，但不匹配href="report.pdf?ver=1" -
[src$="/logo.png"]要求路径最后一段**正好是 logo.png**，不能带查询参数或 hash - 对 class 属性慎用：因为
class="icon icon--large"的属性值结尾是--large，不是large；若想匹配含 large 的 class，该用*=或 JS 处理
属性选择器 [attr="value"] 是完全相等，不是包含
标题里说的 “= 匹配包含内容” 是常见误解。[attr="value"] **只匹配属性值与字符串完全一致的情况**（包括空格、大小写、顺序），和 JavaScript 的 === 类似。
例如：
-
[type="submit"]匹配<button type="submit">，但不匹配<button type=" submit ">（多了空格） -
[class="btn"]不会匹配class="btn primary"，哪怕它“包含 btn” —— 因为整个值是"btn primary"，不等于"btn" - 若真要匹配“包含某个单词”的 class，应使用
[class~="btn"]（波浪号表示空格分隔的单词匹配）
别把 *= 和 = 搞混了
真正做“包含子字符串”匹配的是 [attr*="value"]，不是 =。这是最容易踩的坑。
对比示例：
-
[title*="error"]→ 匹配title="Network error occurred"✔️ -
[title="error"]→ 只匹配title="error"，其他都不行 ❌ -
[title~="error"]→ 匹配title="system error warning"（空格分隔）✔️，但不匹配title="error-code"❌
性能上，*= 和 ^=/$= 都比 = 慢，尤其在深层 DOM 中大量使用时；若只需精确匹配，优先用 =。
浏览器兼容性不是问题 —— 这些选择器在 IE7+ 就已支持，但注意：CSS 层叠顺序仍受特异性规则约束，[attr="v"] 和 .cls 特异性相同，谁在后面谁生效。
