属性选择器默认大小写敏感，必须显式加i修饰符（如[data-role="admin" i]）才能忽略ascii字母大小写；i须紧贴右括号、小写、无空格，仅适用于带引号的值匹配类型，不支持ie。
属性选择器默认大小写敏感，必须显式加 i 才能忽略大小写
CSS 属性选择器（如 [data-role="admin"]）默认严格区分大小写。哪怕 HTML 中写了 data-role="Admin"，用小写值匹配也会失败。这不是浏览器 bug，而是 CSS 规范强制行为。想让它“不挑大小写”，唯一合法方式是加 i 修饰符——且必须紧贴右括号，不能有空格、不能大写。
[attr="val" i] 的写法细节和常见错误
正确写法只有一种核心模式：[attr="val" i]。它只作用于当前属性值的比较，不影响其他选择器部分。
-
[data-role="header" i]✅ 有效 -
[data-role="header"i]✅ 也有效（无空格） -
[data-role="header" i ]❌ 末尾多空格，整个选择器被浏览器忽略 -
[data-role="header" I]❌ 大写I，不识别 -
[data-role="header"] i❌ 写在括号外，语法无效 -
[attr=value i]❌ 必须带引号才能用i，无引号形式不支持修饰符
哪些属性选择器类型支持 i，哪些不支持
i 适用于所有带引号的值匹配类型，但不适用于存在性检查或无引号写法。
- 支持：
[attr="val" i]、[attr~="val" i]（空格分隔词）、[attr*="val" i]（子串）、[attr^="val" i]（前缀）、[attr$="val" i]（后缀） - 不支持：
[attr]（仅存在性）、[attr=val]（无引号等价于[attr="val"]，但没引号就不能加i） -
i只折叠 ASCII 字母（a–z / A–Z），对中文、德语 ß、日文等 Unicode 字符无影响
现代浏览器已全面支持，但 IE 完全不兼容
Chrome 63+、Firefox 61+、Safari 15.4+、Edge 79+ 都已原生支持 i。2026 年今天，你基本可以放心使用——除非项目明确要求兼容 IE。
- 若需降级：服务端或构建时统一标准化
data-属性值（比如全部转小写），再用标准选择器匹配 - 避免 JS 补位（如遍历元素手动加 class），性能差且维护成本高
- 注意：HTML 标准属性（如
type、href）在解析时会被浏览器自动归一化为小写，但data-属性保留原始大小写，这点容易误判
i 必须和右括号紧贴，且只对当前属性值生效；它不会让整个选择器链变宽松，也不会影响伪类或组合器的行为。**前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
