应使用 [data-id^="_"] 实现前缀匹配，^= 表示属性值以指定字符串开头，下划线无需转义，ie8+ 支持但 ie8 不支持带下划线的自定义属性名。
用 [attr^="_"] 匹配以 `_` 开头的属性值
当你要选中所有 data-id 值以 _ 开头的元素（比如 data-id="_temp"、data-id="_loading"），必须用 ^=，不是 = 或 *=。写成 [data-id="_temp"] 只能精确匹配，而 [data-id^="_"] 才是前缀匹配。
常见错误是把 ^= 和 JS 的 startsWith() 混淆，以为要写成 [data-id^="\_"] —— 实际上 CSS 里下划线就是普通字符，不需要转义。
-
^=只看开头，不关心后面有没有空格或其它字符（data-id="_abc def"也会被选中） - IE8+ 支持，但 IE8 不支持自定义属性名带连字符以外的符号（如
data-_id在 IE8 下无效） - 如果属性值是空字符串
data-id=""，[data-id^="_"]不会匹配它
用 [attr$="_"] 匹配以 `_` 结尾的属性值
想筛选 class="btn_primary" 这类含下划线结尾的类名？不行——class 是空格分隔的多值，CSS 属性选择器对 class 只能做全值或前缀/后缀匹配，无法按单词粒度处理。但如果你用的是自定义属性，比如 data-role="submit_" 或 data-name="user_"，那 [data-role$="_"] 就能稳稳命中。
注意：后缀匹配对 HTML 原生属性（如 id、name）同样有效，但别指望它能识别语义边界。例如 id="item_123_" 可以，但 id="item_123" 不行；id="item_123_end" 也不会被 [id$="_"] 匹中——因为结尾不是 _。
立即学习“前端免费学习笔记（深入）”；
-
$=是严格结尾匹配，末尾必须是目标字符，不能多也不能少 - 和
^=一样，不区分大小写（除非加i标志，如[data-id$="_" i]） - 若属性未声明，或值为
null/undefined（HTML 中表现为没写该属性），则完全不参与匹配
用 [attr*="_"] 匹配属性值中包含 `_` 的任意位置
这是最宽松的匹配方式，适合快速筛选含下划线的值，比如 data-config="theme_dark_v2"、data-tag="admin_user"。只要中间有至少一个 _，就满足条件。
但正因太宽泛，容易误伤。例如 data-path="/api/v1/users" 不含下划线，安全；可一旦变成 data-path="/api/v1/users_list"，就会被 [data-path*="_"] 拖进来——哪怕你本意只是筛配置项。
-
*=性能略低于^=和$=，尤其在大量元素 + 长属性值时，浏览器需逐字符扫描 - 无法跳过转义序列，比如
data-val="a\_b"中的\_是字面量反斜杠+下划线，仍算“包含_” - 不支持正则，想排除某些模式（如“只含一个下划线”或“下划线不在开头”）就得靠 JS 补充判断
为什么 [attr~="_"] 和 [attr|="_"] 对 `_` 几乎没用
~=` 是空格分隔的单词匹配，要求属性值是以空格切开的独立单词等于 _，比如 class="_ theme dark" —— 这种情况极少，且 _ 单独作 class 名违反常规命名习惯。
|=` 是“连字符前缀匹配”，专为语言码设计（如 lang="zh-CN"），匹配 zh 或 zh-CN。它要求匹配部分后紧跟 - 或到字符串结束，所以 [data-id|="_"] 只能匹配 data-id="_" 或 data-id="_-suffix"，对大多数含下划线的场景毫无意义。
- 这两个伪匹配方式在真实项目里几乎不会用来处理下划线逻辑
- 误用
~=`替代*=会导致大量漏选（比如data-id="a_b"完全不被[data-id~="_"]触及） - 浏览器兼容性虽好，但语义错位比性能问题更致命
