CSS属性选择器默认大小写敏感，使用[i]修饰符可实现ASCII字母的大小写不敏感匹配，支持=、~=、*=、^=、$=等类型，现代浏览器已兼容，IE不支持。
属性值匹配时大小写敏感是默认行为
CSS 属性选择器（如 [data-type="user"]）默认区分大小写，这意味着 data-type="User" 或 data-type="USER" 不会被匹配。这在处理用户输入、第三方数据或不规范 HTML 时容易漏选元素。
[attr="val" i] 用 i 修饰符实现大小写不敏感匹配
i 是 CSS Selectors Level 4 引入的标志符，直接附加在属性选择器右方方括号内，仅作用于该属性值的比较：
[data-role="admin" i] { color: red; }
这段规则会同时匹配：<div data-role="admin"><div data-role="ADMIN"><div data-role="Admin">
但不会影响其他属性或伪类。
-
i必须紧贴右括号，写成[attr="val"i]或[attr="val" i]都合法，但[attr="val" I]（大写）无效 - 仅支持 ASCII 字母的大小写折叠，对 Unicode（如中文、德语 ß）无影响
- 目前所有现代浏览器（Chrome 63+、Firefox 61+、Safari 15.4+、Edge 79+）均已支持，IE 完全不支持
[attr~="val" i] 和 [attr*="val" i] 也支持 i
i 修饰符适用于所有属性选择器类型，包括：
-
[attr="val" i]：完全匹配（推荐用于明确值） -
[attr~="val" i]：空格分隔单词匹配（如class="btn primary"中匹配primary） -
[attr*="val" i]：子串匹配（注意性能，避免在长文本上滥用） -
[attr^="val" i]和[attr$="val" i]：前缀/后缀匹配也生效
但 [attr]（存在性检查）和 [attr=val]（无引号等价于 [attr="val"]）不支持 i，必须显式加引号才能用修饰符。
兼容旧浏览器时的降级方案
若需支持 IE 或极老版本，无法使用 i，只能靠预处理或 JS 补位：
- 服务端或构建时统一标准化属性值（如全部转小写），再用标准选择器
- 用 JS 动态添加 class：
document.querySelectorAll('[data-status]').forEach(el => el.classList.add(el.dataset.status.toLowerCase()))，再用.pending这类类名控制样式 - 避免依赖大小写不敏感的纯 CSS 方案——这是最稳妥的选择
真正要注意的是：很多人以为加了 i 就能解决所有“不匹配”问题，结果发现是属性名拼错、HTML 命名空间干扰、或属性根本没被渲染出来——先确认 getBoundingClientRect() 或 DevTools 中确实存在对应属性值，再谈大小写。
