[attr*="value"]比[attr~="value"]更适合模糊样式匹配，因为前者是子串匹配，后者仅匹配空格分隔的独立单词；data-*属性值通常无空格，故*=才有效。
为什么[attr*="value"]比[attr~="value"]更适合模糊样式匹配
因为[attr*="value"]是纯子串匹配，而[attr~="value"]只认空格分隔的独立单词——后者在class里有用，但对data-*属性几乎无效。比如data-role="modal-confirm"，用[data-role~="modal"]完全不匹配，必须写[data-role*="modal"]才生效。
常见错误是看到“模糊”就下意识选~="，结果样式根本不起作用。实际项目中，data-*值基本不用空格分隔，*=才是默认行为。
-
[attr~="val"]要求属性值是"val other word"这种格式，中间必须有空格 -
[attr*="val"]只要字符串里连续出现val就命中，比如"modal-confirm"、"error-404"、"btn-primary-lg" - HTML标准里，只有
class、rel等少数属性按空格分词解析，其他属性（包括所有data-）都当整体字符串处理
为什么[attr*="value"]比正则或JS搜索更适合样式控制
样式层不该承担逻辑判断。用JS遍历+classList.toggle虽然灵活，但破坏了CSS的声明式特性，也容易漏掉动态插入的元素。而[attr*="value"]是原生CSS能力，浏览器直接在渲染流程中匹配，无需额外JS介入。
它不是“搜索”，而是“条件样式绑定”：只要HTML里写了data-status="pending"，[data-status*="pending"]就自动生效，连事件监听都不用写。
- 避免重复逻辑：不用在JS里判断状态再加class，也不用维护两套状态映射
- 天然支持动态内容：AJAX加载的新节点只要带对应data属性，样式立刻生效
- 不增加运行时开销：匹配发生在CSS计算阶段，和类选择器一样走浏览器内部优化路径
哪些场景下[attr*="value"]反而会出错
最典型的是误用于class属性。写[class*="btn"]看着方便，但class="btn-large disabled"会被匹配，class="button-primary"也会被误伤——因为*=把整个class字符串当一个整体扫。
真正需要按语义区分按钮时，应该用[class~="btn"]（单词匹配）或直接用.btn类选择器。data-*才是*=的安全区。
- 禁止在
class、id上使用*=，除非你明确想做字符串暴力匹配 - 避免用
[data-id*="123"]匹配数字ID——data-id="1234"也会被拉进来，应改用[data-id="123"]精确匹配 - 大小写敏感：
[data-type*="API"]不会匹配data-type="api-v1"，需统一命名规范
性能影响到底有多大
单个[attr*="value"]选择器的匹配成本略高于类选择器，但远低于深层嵌套或通配符。现代浏览器对属性选择器做了专门优化，只要不滥用（比如写几十个[data-*]规则），实际渲染帧率几乎无感。
真正的瓶颈不在*=本身，而在你把它和复杂后代选择器拼在一起，比如div.container [data-role*="modal"] button——这时浏览器要先找所有button，再逐个向上查父级是否满足条件。
- 保持选择器扁平：
[data-role*="modal"]比.container [data-role*="modal"]快得多 - 优先用
[attr]代替[attr*=""]：如果只是判断存在性，[data-loaded]比[data-loaded*=""]更轻量 - 避免在高频动画区域大量使用，比如
[data-state*="hover"]配合:hover可能触发重排
[attr*="value"]的价值不在“快”，而在“稳”——它绕开了class命名冲突、JS状态同步延迟、服务端模板与前端逻辑脱节这些更难调试的问题。只要data属性写得干净，这个选择器就几乎不会出错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
