CSS属性选择器区分大小写控制_i与s标志位的应用

css属性选择器默认大小写敏感，需用[i]标志（小写、紧贴]）启用忽略大小写；s标志未被支持；html标准属性值会被浏览器归一化为小写，data-属性则保留原大小写。

属性值大小写敏感是默认行为

CSS 属性选择器（如 [type="submit"]）默认严格区分大小写，哪怕 HTML 中的属性值是小写，而 CSS 里写了大写，就匹配不上。这不是浏览器差异，是规范强制要求——除非你显式启用不区分大小写的匹配模式。

[attr="val" i] 中的 i 标志位必须紧贴右括号

加 i 是开启忽略大小写的唯一方式，但它不是写在选择器末尾，也不是独立修饰符，而是必须直接跟在右方括号 ] 前面，中间不能有空格或换行。写成 [attr="val"] i 或 [attr="val" i ] 都无效，浏览器会直接忽略整个选择器。

常见错误现象：[data-role="header" i] 有效；[data-role="header" i]（末尾多空格）或 [data-role="header" I]（大写 I）均不生效。

• i 区分大小写，只能是小写 i
• 只对当前属性选择器生效，不影响其他部分（比如类名、标签名仍区分大小写）
• 不支持在伪类或伪元素中使用（如 :is([attr="v" i]) 是非法语法）

s 标志位几乎没人用，也基本没浏览器支持

CSS Selectors Level 4 曾提案引入 s（strict case-sensitive），用于显式强调大小写敏感，但至今没有主流浏览器实现它。所有浏览器目前都把不带标志的选择器当作 s 行为处理——也就是说，s 纯属纸上谈兵，写上去等于白写，还可能引发解析失败。

立即学习“前端免费学习笔记（深入）”；

使用场景：无。别用。如果你看到别人写了 [attr="v" s]，那大概率是混淆了正则或 js 的 flag 写法。

HTML 属性值本身是否小写，会影响匹配结果

即使用了 i，最终能否匹配，还取决于 HTML 解析后该属性的真实值。例如：<input type="SUBMIT"> 和 <input type="submit"> 在 dom 中都会被标准化为小写（对标准属性如 type、id），但自定义属性如 data-foo="Bar" 会原样保留大小写。

所以实际开发中要注意：

• 对标准 HTML 属性（type、role、lang 等），i 多数时候是冗余的，因为浏览器已做归一化
• 对 data- 属性或 xml 模式文档，i 才真正起作用
• 服务端渲染或模板拼接时若混用大小写，不加 i 就容易漏匹配

事情说清了就结束