css属性选择器默认区分大小写，因html文档中字符串匹配启用s标志；需用[i]标志实现忽略大小写匹配，且位置严格、ie不支持。
默认就是区分大小写，不需要额外操作——这是 CSS 规范强制要求的行为，不是 bug，也不是浏览器差异。
为什么[attr="val"]默认严格匹配大小写
CSS 属性选择器的字符串匹配在 HTML 文档中默认启用 s 标志（strict），即“严格区分大小写”。虽然这个标志几乎从不显式写出，但它就是底层行为。例如：[data-role="Header"] 不会匹配 data-role="header"，哪怕 DOM 中两者共存。
- HTML 标准属性（如
type、lang）在解析时通常被归一化为小写，但匹配仍按字面值进行 -
data-属性保留原始大小写，所以data-id="ABC"和data-id="abc"是两个不同值 - 伪类（如
:hover）、伪元素（如::before）名称本身不参与字符串比较，因此不涉及大小写问题
[attr="val" i] 是唯一可靠的忽略大小写方式
想让匹配不区分大小写，必须显式加 i 标志，且位置极其严格：它必须紧贴右方括号 ]，中间不能有空格、换行或大小写错误。
- ✅ 正确：
[data-role="header" i]、[lang="EN" i] - ❌ 无效：
[data-role="header" i ]（末尾空格）、[data-role="header" I]（大写 I）、[data-role="header"] i（分离写法） -
i只作用于当前属性选择器，不影响前面的标签名或后面的类名，比如div[data-role="header" i].Nav中，div和.Nav仍按各自规则匹配
IE 不支持 i 标志，现代浏览器均支持
如果你的项目还需兼容 IE（包括 Edge Legacy），i 标志完全不可用。此时只能靠 JS 预处理或服务端输出统一格式的属性值。
- Edge 16+、Chrome 49+、Firefox 47+、Safari 10.1+ 均支持
i - XML/XHTML 文档中
i无效，因为 XML 本身强制区分大小写，CSS 无法覆盖该语义 - 不要尝试用
s标志显式声明“严格模式”——它没有实际意义，也基本无浏览器实现
真正容易被忽略的是：属性值大小写是否敏感，取决于它是标准 HTML 属性还是自定义 data- 属性；而 i 标志只解决匹配逻辑，不改变 DOM 中实际存储的大小写形式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
