[attr="val" i] 是唯一可靠写法，因 html 属性不区分大小写而 css 选择器默认严格匹配，i 是 css selectors level 4 标准，须紧贴引号后、右括号前且唯一空格，引号不可省。
必须加 i，且位置、大小写、引号都错不得——否则规则完全不生效。
为什么 [attr="val" i] 是唯一可靠写法
HTML 属性本身不区分大小写（data-role="Header" 和 data-role="header" 在 DOM 中等价），但 CSS 属性选择器默认按字符串严格比对，[data-role="header"] 不会匹配 data-role="Header"。加 i 是目前唯一标准方案，它来自 CSS Selectors Level 4，不是浏览器私有特性。
-
i必须紧贴引号闭合后、右方括号前，中间有且仅有一个空格：[type="TEXT" i]✅，[type="TEXT"i]❌，[type="TEXT" I]❌ - 属性值必须用英文引号包裹：
[lang="EN" i]✅，[lang=EN i]❌（未引号的EN被解析为标识符，i失去作用对象） -
i只影响当前属性值的比较逻辑，不影响选择器其余部分（比如类名、元素名、其他属性）
[href$=".pdf" i] 是最典型也最容易翻车的用法
匹配 PDF 链接时，只写 [href$=".pdf"] 看似合理，但实际会漏掉 href="doc.PDF"、href="file.Pdf" 这类真实存在的情况。加 i 后才能稳定覆盖。
- 错误写法：
[href=".pdf"]（要求整个href值恰好等于.pdf，几乎无用） - 错误写法：
[href*=".pdf"]（子串匹配，会误中href="report.html?pdf=1"） - 错误写法：
[href$=.pdf]（缺少引号，语法非法，整条规则被浏览器忽略） - 正确写法：
a[href$=".pdf" i] { color: red; }，现代浏览器（Chrome 66+、Firefox 57+、Safari 10.1+、Edge 16+）均支持
多个属性都要忽略大小写，不能偷懒
如果同时要匹配 data-a 和 data-b 的大小写变体，必须各自标注 i，不能只写一个。
- ✅ 正确：
[data-a="A" i][data-b="B" i] - ❌ 错误：
[data-a="A"][data-b="B" i]（前者仍严格区分大小写） - ❌ 错误：
[data-a="A" i][data-b="B"]（后者仍严格区分大小写） - 注意：IE 全系列不支持
i，若需兼容 IE9–11，只能靠 JS 补充 class 或统一服务端输出小写值
真正容易被忽略的是引号和空格的组合约束——i 看似简单，但少一个空格或引号位置偏移一格，整条规则就静默失效，连控制台都不会报错。写完务必用不同大小写的 HTML 值实测一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
