[data-xxx]选择器可匹配任意含该data-属性的元素，不依赖值；属性名须全小写且用连字符，如data-user-id对应[data-user-id]；值匹配需加引号，如[data-status="error"]。
用 [data-*] 选择器直接匹配存在该属性的元素
只要 HTML 元素带有某个 data- 属性（不管值是什么），就能用 [data-xxx] 语法选中。比如页面里有 <div data-id="123"></div>，写 div[data-id] 就能命中它。
这种写法适合做“开关式”样式控制：比如所有带 data-debug 的容器加黄色背景，方便开发时快速定位。
- 属性名必须原样写出，
data-user-id≠dataUserId≠data_user_id - 浏览器会把属性名强制转为小写，所以
data-UserId实际存成data-userid，CSS 里得写[data-userid] -
[data-foo]不会匹配data-foo-bar，后者是另一个独立属性
用 [data-*="value"] 精确匹配属性值
当你要筛选特定值时，比如只找 data-status="error" 的按钮，就用等号加引号：button[data-status="error"]。
注意这个匹配是**完全相等且大小写敏感**的：data-status="Error" 或 data-status="ERROR" 都不会被选中。
- 值必须用引号包裹，
[data-id=123]是无效语法（遇空格、连字符、特殊字符会直接解析失败） - 如果要忽略大小写，得加
i标志：[data-status="error" i]，但仅支持现代浏览器（IE 不支持） - 不要用
[class="btn"]的思路套用到data-上——data-tags存多个值（如"a b c"）时，仍需用~="a"才能按单词匹配
用 [data-*^="prefix"] 匹配属性值开头
适用于值有固定前缀的场景，比如 data-api-url="https://api.example.com/v1/users"，想统一处理所有 v1 接口的请求元素，可以写：[data-api-url^="https://api.example.com/v1/"]。
这个操作符不关心后面是什么，只要开头一致就匹配，比 *= 更安全，也比 = 更灵活。
- 常见误用：
[src^="data:"]能匹配data:image/png;base64,...和data:text/plain,...，但写成[src="data:"]就永远选不到——因为实际值远长于"data:" - 不要对用户输入或动态拼接的值直接用于
^=，避免前缀含空格或特殊字符导致选择器失效 - 如果前缀本身含反斜杠、括号等 CSS 特殊字符，需手动转义，但更稳妥的做法是换用 JS +
getAttribute()判断
JavaScript 中用 querySelectorAll 查找，但别拼错选择器字符串
CSS 选择器在 JS 里一样生效，document.querySelectorAll('[data-role="modal"]') 是最常用方式。但拼字符串时容易翻车。
比如你想根据数组 ["admin", "editor"] 批量查 data-role，不能写成 [data-role="admin,editor"] —— 这不是合法语法，浏览器直接忽略。
- 正确做法是循环拼每个值：
const selector = `[data-role="${role}"]`，再合并 NodeList - 值里含双引号、反斜杠或换行？先用
JSON.stringify()包一层再插进去，否则选择器崩掉 - 框架（React/Vue）里渲染的
data-属性可能没出现在最终 DOM 中——务必先在开发者工具 Elements 面板确认属性真实存在，而不是只看模板代码
data-userId，CSS 却写 [data-userId]，结果什么也不匹配。浏览器早就把它转成 data-userid 了，而 CSS 选择器认的就是这个小写形式。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
