CSS选择器关键字不区分大小写，但属性值匹配默认严格区分大小写；需用[i]标志（紧贴右括号、小写）实现ASCII字母忽略大小写，仅对带引号的属性选择器生效。
CSS选择器本身不区分大小写，但属性值匹配默认严格区分大小写——这是绝大多数人踩坑的根源。
标签名、类名、ID 名是否区分大小写
CSS 规范明确：所有选择器关键字（如 div、.btn、#header）都是 ASCII case-insensitive 的。写成 DIV、.BTN 或 #HEADER 都能生效，浏览器会自动归一化为小写处理。
但 HTML 文档模式会影响实际匹配结果：
- 在 HTML 模式下，元素标签名和标准属性名（如
class、id、type）本身不区分大小写，但属性值仍区分 - 在 XHTML 或 XML 模式下，全部内容（包括标签、属性、值）都区分大小写
- 自定义
data-属性值保留原始大小写，不会被浏览器归一化
[attr="val"] 中的 val 为什么经常不匹配
因为 val 是属性值，而属性值匹配默认大小写敏感。哪怕 HTML 写的是 <input type="TEXT">，用 input[type="text"] 也选不到它。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
-
input[type='Submit']匹配不到<input type="submit"> -
[data-role='Header']匹配不到<div data-role="header"> <li> <code>img[alt='Logo']在用户输入或 CMS 输出中容易漏掉大写变体
解决办法只有显式加 i 标志：input[type="submit" i]、[data-role="header" i]。
i 标志的写法和限制
i 必须紧贴右方括号 ]，不能有空格，且只能是小写字母 i。它只对当前属性选择器生效，不影响其他部分。
正确写法示例：
[type="button" i] [data-id="ABC" i] [class~="active" i] [href^="HTTPS" i]
错误写法（整条规则会被浏览器忽略）：
-
[type="button" i ]（末尾空格） -
[type="button" I]（大写 I） -
[type="button"] i（i 在括号外） -
:is([type="button" i])（伪类内部不支持i）
注意：[attr]（存在性检查）和 [attr=val]（无引号写法）不支持 i，必须写成带引号的形式才能用。
哪些场景必须用 i，哪些可以不用
需要 i 的典型场景：
- 表单控件的
type值来自用户或旧系统，大小写混乱（"TEXT"/"text"/"Text"） - 自定义
data-属性由 JS 动态设置，无法统一规范大小写 - 对接第三方 HTML 片段（如富文本编辑器输出），属性值不可控
可以不用 i 的情况：
- 项目全程可控，HTML 和 CSS 中的属性值始终统一小写（推荐做法）
- 匹配语言代码（
lang）时，用[lang|="zh" i]虽然合法，但更稳妥的是直接用[lang^="zh"]，因为浏览器对lang值通常已归一化为小写 - 布尔属性存在性判断（
[disabled]、[required]）根本不需要值比较
i 不是万能胶，它只做 ASCII 字母折叠，对 Unicode 字符（如德语 ß、中文、emoji）无效；IE 完全不支持，兼容需求强的项目得靠 JS 补位。
