[attr="value"] 是唯一真正精确匹配的写法，其余如 [attr~="val"]、[attr*="val"] 均为模糊或语义化匹配；它要求字面级严格比对，大小写、空格、引号内内容必须完全一致，且支持 i 标志忽略 ascii 字母大小写。
能，但“精确”二字很关键——[attr="value"] 是唯一真正精确匹配的写法，其余如 [attr~="val"]、[attr*="val"] 都是模糊或语义化匹配，用错就容易漏选或误选。
为什么 [attr="value"] 会失效？常见匹配失败原因
它不是“差不多就行”，而是字面级严格比对。哪怕多一个空格、大小写不一致、引号类型混用，都会失败。
-
type="Text"不匹配[type="text"]—— CSS 层面区分大小写，HTML 的 type 属性规范虽不强制大小写，但选择器只认字面值 -
class="btn primary"不匹配[class="btn"]—— 实际属性值是"btn primary"，不是"btn" -
data-id=" 123 "（前后带空格）不匹配[data-id="123"]—— 空格是值的一部分 -
href='https://example.com'（单引号）仍可被[href="https://example.com"]匹配 —— 引号类型不影响，但引号内的内容必须一字不差
[attr~="val"] 适合 class 这类多值属性，别乱套在 type 上
它专为用空格分隔的属性设计，比如 class、rel、data-tags。把 [type~="submit"] 当成 [type="submit"] 用，纯属误解。
-
class="btn btn-lg active"→[class~="btn"]✅ 匹配；[class~="btn-lg"]✅；[class~="btn-lg-active"]❌（连字符不算分隔） -
type="submit"→[type~="submit"]语法合法，但等价于[type="submit"]，没额外价值 -
data-role="sidebar main"→[data-role~="main"]✅；data-role="sidebar-main"→[data-role~="main"]❌
需要忽略大小写？加 i 标志，但注意兼容范围
原生支持，不用 JS 或预处理。写法是 [attr="val" i]，i 必须紧贴引号内值之后、右括号之前。
-
input[type="submit" i]同时匹配type="submit"、type="SUBMIT"、type="Submit" - 仅对 ASCII 字母有效，
data-lang="中文"无法用i忽略汉字大小写（汉字无大小写） - 主流浏览器（Chrome/Firefox/Safari/Edge）均支持，但 IE 完全不支持，若需兼容 IE，只能靠 JS 统一标准化属性值
真正“精确”的前提，是你能控制属性值的生成方式：服务端模板别多吐空格，JS 动态设置时 trim 一下，自定义属性尽量用单一语义值而非拼接字符串。否则再精准的选择器也救不了脏数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
