[attr="value" i]选择器需小写i紧贴右括号，仅对当前属性值忽略大小写，不影响类名等其他部分，ie不支持，现代浏览器可用但需慎用于*、^、$等模糊匹配。
属性选择器加 i 必须紧贴右括号，不能有空格
很多人写成 [data-role="Header" i] 或 [data-role="Header"] i，结果样式不生效——浏览器直接忽略整个选择器。真正有效的写法是 [data-role="Header" i]（注意 i 紧挨着 ]，中间零空格）。大小写必须是小写 i，大写 I 无效。
[attr="val" i] 只对当前属性值生效，不影响其他部分
这个 i 不会让类名、标签名或伪类变不区分大小写。比如 button[type="SUBMIT" i].Primary 中，type="SUBMIT" 匹配 type="submit" 或 type="Submit"，但类名 .Primary 仍只匹配 class="Primary"，不会匹配 class="primary"。HTML 中 class/id 本身不区分大小写是解析器行为，和 CSS 选择器无关。
哪些场景必须用 i，哪些其实没必要
- 需要匹配用户输入的 data-* 属性（如
data-api-key值可能混用大小写）时，i很实用 -
[lang="en" i]能同时命中lang="EN"、lang="en-us"（只要开头是 en） - 但
[type="text" i]其实多余——浏览器会把 HTML 的type属性值归一化为小写，所以type="TEXT"在 DOM 中实际是type="text" - IE 完全不支持
i，Edge 16+ 和所有现代浏览器支持；XHTML/XML 文档中i无效
[attr*="val" i] 容易误匹配，得小心验证
比如 [class*="btn" i] 会匹配 class="Button"、class="BTN-MAIN"，甚至 class="subnav"（因为含 btn 子串）。它不是正则，不支持 ^ 或 $ 锚点。真要精确控制，得靠 JS 配合 document.querySelectorAll() 过滤，或者改用更具体的属性结构（比如统一用 data-component="button"）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
