CSS属性选择器默认大小写敏感，需用[data-attr="val" i]实现值的大小写不敏感匹配，i修饰符仅作用于属性值且需与闭合括号间有空格。
attribute selector 默认区分大小写
HTML 属性值（如 class、data-type）在 CSS 属性选择器中默认是大小写敏感的。比如 [data-role="header"] 不会匹配 data-role="Header" 或 data-role="HEADER"，哪怕语义上等价。浏览器按字面逐字符比对，不进行标准化转换。
常见错误现象：
– 页面中写了 data-status="Success"，但样式用 [data-status="success"] 无效
– 第三方组件输出的属性值大小写不统一，导致选择器失效
用 [attr="val" i] 实现大小写不敏感匹配
CSS Level 4 引入了 i 修饰符（case-insensitive flag），加在属性选择器右方方括号内，紧贴闭合括号前。它让整个值匹配忽略大小写，且兼容现代主流浏览器（Chrome 63+、Firefox 61+、Safari 15.4+、Edge 79+）。
实操建议：
– 必须写成 [data-role="header" i]，不能写成 [data-role="header"i]（中间需空格）
– i 只影响属性值比较，不影响属性名（data-role 本身仍需拼写正确）
– 不支持正则或通配，仅用于精确值匹配的大小写忽略
立即学习“前端免费学习笔记（深入）”；
示例：[data-state="active" i] { color: green; } 同时匹配：
– data-state="ACTIVE"
– data-state="Active"
– data-state="active"
替代方案：用 [attr~="val"] 或 [attr*="val"] 的局限性
有人试图用单词匹配 [class~="btn"] 或子串匹配 [data-id*="user"] 规避大小写问题，但这不是等价替代：
-
[attr~="val"]要求值是空格分隔的独立单词，且仍大小写敏感 -
[attr*="val"]是子串模糊匹配，可能误中（如"admin"匹配到"administrator"） - 两者都无法保证“完全相等 + 忽略大小写”这个语义
真正需要“值相等但不拘泥大小写”时，i 是唯一标准解法。
服务端/构建时无法控制 HTML 大小写时的注意事项
某些 SSR 框架（如早期 Next.js）、模板引擎或 CMS 输出的 HTML 属性值大小写不可控，此时依赖 i 修饰符最稳妥。但要注意：
– Vue / React 的 JSX 中，data-xxx 属性会原样透出到 DOM，大小写由你传入的字符串决定，可控；
– 使用 i 后，若未来需对接严格校验工具（如某些 WCAG 自动化扫描器），需确认其是否识别该语法（目前主流工具已支持）；
– 不要滥用：仅当确实存在大小写混用且无法统一源头时才启用，避免掩盖数据不规范问题。
最容易被忽略的一点：i 不作用于属性名本身——[DATA-ROLE="header" i] 仍无效，因为 DATA-ROLE 不是合法属性名；大小写规则只管值，不管键。
