[attr="val" i]是唯一原生支持忽略ASCII字母大小写的写法，但必须小写i紧贴右引号后、右括号前，位置或大小写错误（如空格、大写I、括号外）均导致整条规则静默失效；仅作用于当前属性值的ASCII字母，不处理空格、中文、数字等，且IE和XML/XHTML中完全不支持。
[attr="val" i] 是唯一原生支持忽略 ASCII 字母大小写的写法，但必须严格满足位置、大小写和文档类型约束，否则整条规则静默失效。
为什么 [attr="val" i] 写不对就完全不生效
浏览器对 i 标志的解析极其严格：它不是修饰符，而是选择器语法的一部分。只要位置或大小写出错，CSS 引擎会直接丢弃整条规则，不报错、不警告、也不降级处理。
-
[type="submit" i]❌（i后有空格）→ 规则被忽略 -
[type="submit" I]❌（大写I）→ 规则被忽略 -
[type="submit"] i❌（i在括号外）→ 规则被忽略 -
[type="submit" i ]❌（括号前有空格）→ 规则被忽略 -
[type="submit" i]✅（小写i紧贴引号后、右括号前）→ 正常匹配type="SUBMIT"、type="Submit"等
i 只作用于当前属性值，且仅限 ASCII 字母
它不会影响前面的标签名、类名，也不会让数字、中文、符号或空格“变小写”。比如 [data-lang="中文" i] 无效，[data-id=" 123" i] 也无效——因为空格是值的一部分，而 i 不处理空格。
-
[class~="Btn"]和[class~="btn"]仍是两个独立选择器，i不改变 class 属性的分词逻辑 -
[href^="HTTPS" i]可匹配href="https://..."，但无法匹配href="Https://..."中的s如果混用大小写（Https≠https，i仍逐字母比对） -
[data-role="Sidebar Main" i]匹配data-role="sidebar main"，但不匹配data-role=" Sidebar Main "（首尾空格未被归一化）
IE 和 XML/XHTML 文档中 i 完全不可用
Edge 16+、Chrome、Firefox、Safari 均支持，但 IE 所有版本均不识别带 i 的选择器，遇到即跳过整条规则。XML 或 XHTML 文档中 i 也被规范禁用，因为 XML 本身区分大小写。
立即学习“前端免费学习笔记（深入）”；
- 需兼容 IE？只能在 JS 中统一标准化属性值：
el.setAttribute('data-role', el.getAttribute('data-role')?.toLowerCase().trim())，再用[data-role="sidebar"] - 服务端模板输出时避免拼接空格或混合大小写，比如不要生成
type=" Text "，而应type="{{ value|trim|lower }}" -
[attr]（存在性检查）和[attr=val]（无引号写法）不支持i，必须用带引号形式才能启用
真正起效的前提不是选择器多“高级”，而是属性值从源头就干净：JS 设置前 .trim() 和 .toLowerCase()，模板渲染时避免字符串拼接，自定义属性尽量单值语义化。否则 i 再标准，也救不了一个带空格的 " text "。
