css属性选择器默认区分大小写，需加i标志（如[data-role="header" i]）才忽略大小写，该语法属selectors level 4规范，现代浏览器支持但ie不支持，i必须紧邻引号后、右括号前且小写，属性值须加引号，多属性需各自标注i。
属性选择器默认区分大小写，必须加 i 标志才忽略
HTML 属性本身不区分大小写（data-role="Header" 和 data-role="header" 在 DOM 中等价），但 CSS 属性选择器默认按字符串严格匹配，[data-role="header"] 不会选中 data-role="Header"。解决方法只有一个：在值后显式添加 i 标志，写成 [data-role="header" i]。这个 i 是 CSS Selectors Level 4 规范的一部分，现代浏览器（Chrome 66+、Firefox 57+、Edge 16+、Safari 10.1+）均支持，IE 完全不支持。
[attr="val" i] 的写法细节和常见错误
必须注意语法位置和引号规则：
-
i必须紧跟在引号闭合之后、右方括号之前，[type="TEXT" i]正确，[type="TEXT"i]（无空格）或[type="TEXT" I]（大写）无效 - 属性值必须加引号——
[lang="EN" i]合法，[lang=EN i]是非法语法（未引号的EN被解析为标识符，而i无法附着其后） -
i只作用于该属性值的比较，不影响其他部分；组合选择器如button[data-role="toggle" i].active中，.active仍按常规类选择器逻辑匹配 - 多个属性同时忽略大小写需各自标注：
[data-a="A" i][data-b="B" i]，不能简写为[data-a="A"][data-b="B" i]
哪些场景下必须用 i，哪些可以不用
是否需要 i 取决于 HTML 实际输出是否可控：
- 自定义
data-属性、lang、type等标准属性，若由 JS 动态设置（如el.setAttribute('data-state', 'ERROR')），建议统一加i，避免样式断裂 - 表单控件如
input[type="submit"]通常可不加，因为 HTML 模板里基本都写小写；但若集成第三方组件或 CMS 输出不可控，加i更鲁棒 -
class和id属性本身不推荐用属性选择器匹配——它们有原生类/ID 选择器，且 HTML 模式下本就不区分大小写；用[class~="btn"]或[class^="btn-"]是例外，此时也应加i（[class~="Btn" i]） - XML/XHTML 文档中
i无效，因为 XML 本身区分大小写，此时必须确保 HTML 和 CSS 值完全一致
兼容性 fallback：没有 i 怎么办
如果项目必须支持 IE 或极老浏览器，不能依赖 i，就只能放弃纯 CSS 方案：
- 服务端渲染时统一转小写输出属性值，让 CSS 写法与 HTML 严格对齐
- 前端 JS 初始化阶段遍历匹配元素，根据实际属性值动态添加标准化 class（如
el.classList.add('data-theme-dark')），再用类选择器控制样式 - 避免使用
[attr="VAL"]这类写法，改用存在性选择器[attr]+ 其他上下文约束（如button[disabled]不关心值，只关心是否禁用）
真正容易被忽略的是：即使写了 i，如果 HTML 里属性值含不可见字符（比如从 Word 复制来的全角空格）、前后有空格，或者用了连字符拼写变体（data-user-id vs data-userId），i 也救不了——它只管大小写，不管结构差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
