[attr~="word"]用于匹配空格分隔的多值属性中完全相等的独立单词，如[class~="btn"]匹配class="btn"或"btn primary"，但不匹配"btn-primary"；它区分大小写，不支持连字符作为分隔符。
用 [attr~="word"] 匹配属性值中“独立单词”
当目标元素的某个属性（如 class、data-role）包含以空格分隔的多个单词，且你只想匹配其中某一个完整单词时，必须用波浪号 ~。它不是模糊搜索，而是严格按“以空格为界”的单词匹配。
常见错误是误用 [attr*="word"] —— 它会把 keyword、foreword 都匹配进来，而 [attr~="btn"] 只会命中 class="btn primary" 或 class="small btn large"，不会匹配 class="button"。
-
class属性天然适合~：因为浏览器解析class="a b c"时，视其为三个独立 token -
data-*属性若人为用空格拼接（如data-tags="react css html"），也可用~ - 不适用于
id、name、src等通常不含空格的属性
用 [attr*="sub"] 匹配属性值中任意位置的子串
星号 * 是真正的“包含”操作符，只要目标子串出现在属性值任意位置，就匹配成功。它不关心边界，也不要求空格分隔。
典型场景是匹配动态生成的 id 或 data-id：比如后端返回 id="user-12345"、id="post-67890"，统一用 [id*="user"] 就能选中所有用户相关节点。
- 注意大小写敏感：
[data-status*="active"]不会匹配data-status="ACTIVE" - 性能无明显损耗，但过度宽泛易误伤（如
[class*="col"]会同时匹配col、column、include） - 可与层级选择器组合提升精度，例如
form [name*="email"]
用 [attr^="prefix"] 和 [attr$="suffix"] 锁定开头或结尾
如果动态属性有稳定前缀或后缀（如 data-api-url="/v1/users/list"、src="logo-dark.svg"），优先用 ^ 或 $，比 * 更精准、语义更清晰。
^ 要求子串必须从属性值首字符开始；$ 要求必须到末尾结束。两者都不依赖空格，也不做单词切分。
-
[src$=".png"]可安全筛选所有 PNG 图片，不会误抓.png?cache=1（除非你显式允许问号） -
[data-id^="item-"]是定位 React/Vue 渲染列表项的常用写法，比[data-id*="item-"]更可靠 - 避免在
class上滥用^：因为class="btn btn-primary"中，btn并非开头，[class^="btn"]会失败
为什么不用通配符 * 选择器？
这里的“通配符”容易混淆：* 作为选择器（如 *{}）和作为属性选择器中的操作符（如 [attr*="val"]）完全无关。前者匹配所有 HTML 元素，后者只是属性值匹配语法的一部分。
真正影响性能和维护性的是属性选择器的使用方式，而非符号本身。最常被忽略的点是：没有锚定父容器就直接用 [data-*]，会导致样式全局泄露或 JS 查询变慢。务必结合稳定父级，例如 #sidebar [data-type="menu-item"]，而不是裸写 [data-type="menu-item"]。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
