[class~="value"] 只认空格不认连字符，因css规范将其定义为空格分隔单词列表匹配，仅以unicode空白符切分属性值，连字符等非空白符不构成分隔；.x与[class~="x"]逻辑一致但适用范围更广；[class*="x"]无语义边界，易误匹配。

为什么 [class~="value"] 只认空格不认连字符？

因为 CSS 规范明确将 ~= 定义为「空格分隔单词列表匹配」——它把 class 属性值当作一个由 Unicode 空白符（空格、制表、换行）切开的词数组，然后逐个做全等比较。连字符 -、下划线 _、点号 . 都不是分隔符，所以 class="btn-primary" 整体就是一个词，[class~="btn"] 自然不匹配。

[class~="x"] 和 .x 实际是同一套匹配逻辑

它们都要求目标词大小写完全一致、独立存在、不能是子串。区别只在适用范围：.x 专用于 class 属性；[class~="x"] 是它的通用化写法，还能用在 lang、data-role 等同样支持空格分隔语义的属性上。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• [lang~="zh"] 能匹配 lang="zh CN"，但不匹配 lang="zh-CN"
• [data-tags~="react"] 能匹配 data-tags="vue react svelte"，但不匹配 data-tags="react-js"
• 一旦属性值里混入逗号或下划线（如 class="btn,primary" 或 class="btn_primary"），~= 就彻底失效

为什么不用 [class*="x"] 替代？

因为 *= 是纯字符串扫描，没有语义边界意识。真实项目中 class 常带版本号、命名空间或 BEM 后缀，比如 btn-v2、primary-btn-compact、Button--large，[class*="btn"] 会把这些全扫进来，造成样式意外泄漏。

• [class*="btn"] 匹配 class="rebutton" → 错误命中
• [class*="btn"] 匹配 class="btn-primary" → 不是“有 btn 角色”，只是字符串含 btn
• [class~="btn"] 才真正表达「这个元素声明了 btn 这个语义角色」

引号和空格在属性选择器里的实际影响

当你要匹配完整属性值（含空格）时，必须加引号，否则空格被解析为选择器分隔符。比如 [data-role=modal dialog] 实际被当成两个选择器：[data-role=modal] 和 dialog，根本不会生效。

• 正确写法：[data-role="modal dialog"] 或 [data-role='modal dialog']
• 如果只想匹配其中某个词，才用 [data-role~="modal"]
• ~= 对空格零容忍：多个连续空格会被规范自动归一化，但任何非空白分隔符（如 ,、_）都会让整个匹配失败

真正容易被忽略的是：这个机制不依赖 HTML 解析器，也不做任何 normalize —— 它只按 CSS 规范定义的空白符规则切分，且大小写敏感、无容错。你写的 class 值怎么存，它就怎么拆。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！