属性值含空格时必须加引号，否则解析失败；[data-role="modal dialog"]正确，[data-role=modal dialog]错误；多值匹配用[attr~="word"]，子串匹配*=易误伤；引号类型需注意JS嵌套转义，大小写敏感应统一小写。
属性值含空格时必须加引号，否则解析失败
直接写 [data-role=modal dialog] 不会选中 data-role="modal dialog" 的元素——浏览器把空格当成选择器分隔符，实际解析成两个独立规则：[data-role=modal] 和 dialog，后者甚至可能匹配到 <dialog></dialog> 标签。
必须用单引号或双引号包裹整个值：
-
[data-role="modal dialog"]✅ -
[data-role='modal dialog']✅ -
[data-role=modal dialog]❌（语法错误，多数浏览器静默忽略）
不加引号只适用于纯字母数字、无空格无特殊字符的值，比如 [type=submit] 可行，但靠侥幸，不推荐。
[attr~="word"] 适合匹配 class 或空格分隔的多值场景
当你想匹配 class="btn primary" 中的 btn，而不是要求整个 class 属性等于 "btn primary"，就该用波浪号选择器。
立即学习“前端免费学习笔记（深入）”；
-
[class~="btn"]能命中class="btn"、class="btn primary"、class="large btn small" -
[class~="btn-primary"]不会匹配class="btn-primary"—— 因为它不是空格分隔的独立单词 -
[data-tags~="vue"]只在你明确控制data-tags值为类似"react vue svelte"这种空格分隔格式时才安全
这个选择器对 type、name 等单值属性无效，写了也等价于 [type="email"]，但语义错乱，建议避免。
别滥用 *= 匹配含空格的值
[data-role*="modal"] 看似能“包含” "modal dialog"，但它也会匹配 "remodal"、"modal-dialog"、"premodal"，边界完全失控。
- 它不做单词切分，只是子串搜索，和空格无关
-
[class*="btn"]会意外命中class="sub-btn"、class="button"、class="btn-large" - 真正需要“包含某个词”的场景，优先用
[class~="btn"]；需要“全值匹配”，就用[data-role="modal dialog"]
除非你明确要模糊容错（比如日志类调试样式），否则 *= 在含空格值里极易误伤。
引号类型和大小写是隐性坑点
单引号和双引号在 CSS 中完全等价，但如果你在 JS 字符串里拼 CSS 规则，就得注意嵌套转义。例如：
- JS 中写
el.style.cssText = '[data-id="user 123"] { color: red; }';✅ - 若用双引号包裹 JS 字符串，里面再用双引号就得转义：
"[data-id=\"user 123\"]"，容易漏 - HTML 标准模式下大小写敏感：
[lang="EN"]不匹配lang="en"；目前无原生i标志支持（[lang="en" i]仅实验性，不可用）
最稳妥的做法：所有属性值统一用双引号 + 小写标准化（如后端/构建时处理 data-* 值），CSS 里始终写 [data-status="active"] 这类形式。
