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">
<br><code><div data-role="ADMIN">
<br><code><div data-role="Admin">
<br>
但不会影响其他属性或伪类。
<ul>
<li>
<code>i 必须紧贴右括号，写成 [attr="val"i] 或 [attr="val" i] 都合法，但 [attr="val" I]（大写）无效
[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 中确实存在对应属性值，再谈大小写。
