[class~="item"]能匹配class="item list"但不匹配class="item-list"，因它按ascii空格分词后全词严格匹配，连字符非分隔符；仅class、rel、lang等规范定义的多值属性支持~=，data-等需用=/^=/|=替代。
为什么[class~="item"]能匹配class="item list"但不匹配class="item-list"
因为[class~="item"]是「全词匹配」，不是子串搜索。浏览器会把class属性值按 ASCII 空格切分成独立 token，再逐个严格比对是否完全等于"item"。所以class="item list"被拆成["item", "list"]，命中；而class="item-list"整个是一个 token，不等于"item"，不命中。
连字符-、下划线_、中文、全角空格都不是分隔符，哪怕看着像“单词”，CSS 也不认。
-
[class~="btn"]→ 匹配class="btn"、class="btn primary"、class="primary btn large" -
[class~="btn"]→ 不匹配class="btn-primary"、class="subbtn"、class="btn_large" - 首尾空格会被忽略，
class=" item "仍能被[class~="item"]匹配
哪些属性真正支持~=匹配空格分隔的单词
不是所有带空格的属性都适用~=——它只对规范定义为「空格分隔无序集合」的原生属性有效。浏览器会按 token 解析，其他属性即使有空格也当普通字符串处理。
- ✅ 安全使用：
class、rel、lang、rev（已废弃） - ⚠️ data-* 属性不能直接依赖
~=：data-roles="admin editor"写[data-roles~="admin"]在标准浏览器中**无效**，得改用[data-roles*="admin"]或 JS 处理 - ❌ 完全不适用：
id、href、src、type——它们不是设计为多值的，[href~="https"]语法合法但逻辑错误，等价于[href="https"]
~=和*=、^=、|=的区别与误用场景
混用这四个操作符是样式失效或误匹配的主因。它们语义完全不同，不能靠“看起来差不多”来替换。
-
[class~="item"]：只认空格分隔的完整单词，大小写敏感（[class~="ITEM"]不匹配class="item"，加i标志才行：[class~="item" i]） -
[class*="item"]：子串搜索，会误中class="subitem"、class="itemized"、class="item-2" -
[class^="item"]：前缀匹配，class="item list"能中，但class="primary item"不行 -
[class|="item"]：等于"item"或以"item-"开头，class="item"和class="item-primary"可中，class="item list"不行
性能上差异极小，但语义错位会导致维护困难——比如用*=替代~=后，某天加了个class="highlight-item"，样式就意外生效了。
实际开发中容易忽略的关键点
最常被跳过的不是语法，而是上下文约束：
-
~=只对空格（U+0020）生效，制表符、换行符、全角空格都不触发分词 - 连续多个空格等价于一个分隔符，
class="item list"和class="item list"效果一致 - HTML 中未声明属性（如没写
class）的元素，任何[class~="xxx"]都选不到——它不 fallback 到空字符串 - 自定义属性若想获得类似
class的语义，得靠 JS 配合dataset或额外约定，纯 CSS 无法让data-tags自动 token 化
别指望~=能智能识别“语义单词”，它只是机械地切空格、逐个比相等。写之前先确认那个属性是不是浏览器真把它当 token 列表处理的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
