属性值含空格时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="tuc-19bc10f7-a41c1c-0 btn tuc-19bc10f7-a41c1c-0"、class="tuc-19bc10f7-a41c1c-0 btn primary tuc-19bc10f7-a41c1c-0"、class="tuc-19bc10f7-a41c1c-0 primary btn large tuc-19bc10f7-a41c1c-0" - 但不匹配
class="tuc-19bc10f7-a41c1c-0 btn-primary tuc-19bc10f7-a41c1c-0"或class="tuc-19bc10f7-a41c1c-0 subbtn tuc-19bc10f7-a41c1c-0"（不是独立单词） - 注意：
~=对data-*属性也有效，但前提是该属性值语义上确实是空格分隔的词列表
用 *= 或 |= 要小心空格带来的边界问题
*=（包含子串）和 |=（连字符开头匹配）在含空格值里容易误匹配：
-
[data-role*="modal"]会匹配"modal"、"modal-dialog"、"modal dialog"，但也可能意外匹配到"modals"或"remodal" -
[data-role|="modal"]只匹配"modal"或"modal-xxx"，对"modal dialog"完全无效（因为它要求值等于modal或以modal-开头） - 所以除非明确需要子串搜索，否则优先用引号全值匹配或
~=单词匹配
HTML 中属性值本身没引号时，CSS 仍要加引号才能安全匹配
即使 HTML 写成
（省略引号），浏览器会自动将其解析为
data-flag="high priority"。但 CSS 选择器不能因此省略引号：
- ❌
[data-flag=high priority]—— 解析为两个选择器，报错或无效果 - ✅
[data-flag="high priority"]—— 唯一可靠写法 - ✅
[data-flag~="high"]或[data-flag~="priority"]—— 若只需匹配其中一个词
实际项目里，属性值含空格却忘记加引号是最常见的 CSS 选择器失效原因之一，调试时先检查引号比查拼写更值得优先做。