属性选择器值默认区分大小写，加i标志可忽略大小写匹配，但i必须紧贴右括号且小写，ie不支持；全角字符、零宽空格等不可见字符仍会导致匹配失败。
属性选择器的值默认区分大小写，[data-role="Header"] 匹配不到 data-role="header"，加 i 标志是最直接有效的解法。
为什么 [attr="val"] 有时不生效？
根本原因是属性值字符串全等匹配——大小写、空格、不可见字符都算在内。比如 data-status="ERROR" 和 [data-status="error"] 完全不匹配；又比如从 Word 复制来的 data-id="user 123"（含全角空格）也无法被 [data-id="user 123"] 捕获。
- HTML 标准属性（如
type、lang）在 DOM 中通常被浏览器归一化为小写，但data-属性保留原始大小写 -
[attr]（只判断存在）不涉及值比较，因此完全不敏感 - 伪类名（如
:hover）、标签名（如div）、类名（如.Nav）本身不区分大小写，但这是 CSS 规范层面的定义，和属性值无关
[attr="val" i] 的写法必须严格
i 必须紧贴右方括号 ]，不能有空格、换行或大写。浏览器遇到 [data-role="header" i ] 或 [data-role="header" I] 会直接丢弃整条规则，控制台也不会报错，只会“静默失效”。
- 正确：
[data-role="header" i]、[lang="EN" i] - 错误：
[data-role="header" i]（末尾多空格）、[data-role="header" I]（大写 I）、[data-role="header"] i（i独立写在后面） -
i只作用于当前属性选择器，不影响前面的类名或后面的伪类，例如.Nav[data-role="header" i]:focus中，.Nav仍按 HTML 模式匹配（不敏感），而:focus本身不涉及大小写
兼容性与替代方案
Edge 16+、Chrome、Firefox、Safari 均支持 i，但 IE 完全不支持。如果项目需兼容 IE，不能依赖 i，得换思路：
- 统一用小写书写所有属性值：HTML 里写
data-role="header"，CSS 里写[data-role="header"] - 用 JavaScript 动态加 class：
el.classList.add("is-header")，再用.is-header选中 - 避免在服务端模板里混用大小写，尤其当属性值来自变量拼接时（如
data-role="{{ role|upper }}"） - 别用
s标志——它只是 CSS Selectors Level 4 的纸面提案，没有任何浏览器实现，写了等于白写
真正容易被忽略的是：即使加了 i，也只解决“匹配逻辑”问题，不解决“属性值污染”。DOM 中藏了零宽空格、BOM、全角引号？i 无能为力。检查元素时，务必右键 →「Edit as HTML」，看原始值长什么样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
