属性值含空格时CSS选择器必须用引号包裹，否则空格被解析为分隔符导致匹配失败；需全值匹配用["attr=\"val\""]，匹配空格分隔的单词之一用[attr~="word"]。
属性选择器中带空格的值必须用引号包裹
当 HTML 元素的属性值包含空格（比如 class="btn primary"、data-role="modal dialog"），直接写 [data-role=modal dialog] 会解析失败——CSS 会把空格当作选择器分隔符，等价于 [data-role=modal] 和 dialog 两个独立选择器，导致匹配不到。
正确做法是给整个属性值加上引号，双引号或单引号均可：
[data-role="modal dialog"] { color: red; }
[data-role='modal dialog'] { color: red; }不加引号只适用于不含空格、不含特殊字符（如 #、.、[ 等）的纯字母数字值。
用 ~= 匹配空格分隔的单词之一
如果目标是匹配属性值中「以空格分隔的某个单词」（典型场景是 class 属性），应使用波浪号属性选择器 ~=，它按空格切分后做全词匹配：
立即学习“前端免费学习笔记（深入）”；
-
[class~="btn"]能匹配class="btn"、class="btn primary"、class="primary btn large" - 但不匹配
class="btn-primary"或class="subbtn"（不是独立单词） - 注意：
~=对data-*属性也有效，但前提是该属性值语义上确实是空格分隔的词列表
用 *= 或 |= 要小心空格带来的边界问题
*=（包含子串）和 |=（连字符开头匹配）在含空格值里容易误匹配：
-
[data-role*="modal"]会匹配"modal"、"modal-dialog"、"modal dialog"，但也可能意外匹配到"modals"或"remodal" -
[data-role|="modal"]只匹配"modal"或"modal-xxx"，对"modal dialog"完全无效（因为它要求值等于modal或以modal-开头） - 所以除非明确需要子串搜索，否则优先用引号全值匹配或
~=单词匹配
HTML 中属性值本身没引号时，CSS 仍要加引号才能安全匹配
即使 HTML 写成 实际项目里，属性值含空格却忘记加引号是最常见的 CSS 选择器失效原因之一，调试时先检查引号比查拼写更值得优先做。（省略引号），浏览器会自动将其解析为 data-flag="high priority"。但 CSS 选择器不能因此省略引号：
[data-flag=high priority] —— 解析为两个选择器，报错或无效果[data-flag="high priority"] —— 唯一可靠写法[data-flag~="high"] 或 [data-flag~="priority"] —— 若只需匹配其中一个词
