CSS支持属性值前缀匹配[attr^="value"]，如[href^="https://"]，但不支持属性名前缀（如data-*）；[attr|="val"]仅匹配完整单词加连字符，如[lang|="zh"]；批量匹配data-属性需JS或统一class。
用 [attr^="value"] 匹配属性值开头
CSS 本身不支持“属性名前缀”过滤（比如所有以 data- 开头的属性），但支持“属性值前缀”匹配——这是最常被误读的一点。如果你要选 href 以 https:// 开头的链接，或 class 以 btn- 开头的元素，就用 [attr^="value"]。
注意：这个选择器只看属性**值**是否以指定字符串开头，和属性名本身无关。
-
[href^="https://"]→ 匹配<a href="https://example.com"></a> -
[class^="btn-"]→ 匹配<button class="btn-primary"></button>，但不匹配<button class="primary-btn"></button> - 大小写敏感：
[data-role^="nav"]不会匹配data-role="NAV"
想匹配所有 data- 属性？CSS 做不到，得靠 JS
CSS 没有通配属性名的语法，不存在类似 [attrname^="data-"] 的写法。浏览器根本不解析属性名前缀，只认你写死的属性名，比如 data-id、data-category 必须分别写。
如果真需要批量操作所有 data- 属性的元素，只能用 JavaScript：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('[data-id], [data-category], [data-role]')
或者更实际的做法是统一加个 class：<div class="has-data-attrs" data-foo="1" data-bar="2">，然后用 <code>.has-data-attrs 选。
[attr|="val"] 是另一个容易混淆的“开头匹配”
[attr|="val"] 看起来像前缀匹配，但它实际匹配的是“完整单词 + 连字符”场景，专为语言代码设计（比如 lang="zh-CN"）。
-
[lang|="zh"]→ 匹配lang="zh"和lang="zh-CN"，但不匹配lang="zho" - 它等价于
[attr="val"]或[attr^="val-"]，中间必须是连字符或结尾 - 别拿它当通用前缀用，比如
[data-type|="user"]不会匹配data-type="user-info"，除非你写成data-type="user-info"且user后面紧跟-或结束
性能与兼容性提醒
属性选择器在现代浏览器里性能尚可，但嵌套过深或大量使用仍会影响重排重绘速度。
- IE7+ 支持
[attr^="val"]，但 IE6 不支持；[attr|="val"]从 IE7 开始支持 - 避免写成
div[data-id^="item"][data-status^="active"]这种多属性连用，尤其在列表项很多时 - 如果只是为样式隔离，优先用 class：
class="item--active"比[data-status="active"]更快也更可控
真正难的不是怎么写对这个选择器，而是想清楚：你到底是要筛选“值”，还是想绕过 class 去 hack 属性名——后者在 CSS 里没有解。
