CSS属性选择器默认大小写敏感，需用[i]修饰符忽略ASCII字母大小写；HTML标签名、class、id在CSS中不区分大小写，但JS操作如getElementById对大小写敏感。
HTML 中的 CSS 选择器本身不区分大小写，但属性值匹配默认严格区分大小写——这是绝大多数人写完规则却没生效的根本原因。
HTML 标签名、class、id 在 CSS 中是否区分大小写
不区分。浏览器会把 DIV、.MyClass、#Header 全部归一化为小写处理，所以它们都能匹配对应 HTML 元素。但注意：这仅适用于选择器关键字本身，不延伸到属性值。
真正踩坑的是 JS 操作和 HTML 文档模式：
-
document.getElementById("Header")对大小写敏感，"header"就找不到 -
document.getElementsByClassName("MyClass")同样敏感 -
document.getElementsByTagName("DIV")不敏感，因为标签名在 HTML 模式下本就不区分 - 如果页面是 XHTML 或 XML 模式（比如
.xhtml后缀或Content-Type: application/xhtml+xml），那么所有内容（包括属性值）都区分大小写
[attr="val"] 匹配不到对应元素的常见原因
最常发生的是属性值大小写不一致，比如 HTML 写了 <input type="TEXT">，而 CSS 写了 input[type="text"] —— 它不会命中。
立即学习“前端免费学习笔记（深入）”；
其他典型情况：
-
img[alt='Logo']匹配不到<img alt="logo"> -
[data-role='Admin']匹配不到<div data-role="admin"> -
button[type=submit]（无引号）在某些场景下解析失败，尤其当值以数字开头或含特殊字符时
根本原因：CSS 属性选择器对引号内的值默认大小写敏感，且无引号写法受限于 CSS 标识符语法（不能以数字开头、不能含空格等）。
用 [attr="val" i] 解决大小写不一致问题
i 是唯一标准解法，它让 ASCII 字母比较忽略大小写，现代浏览器（Chrome 63+、Firefox 61+、Safari 15.4+、Edge 79+）均支持，IE 完全不支持。
关键细节：
-
i必须紧贴右括号，写成[type="button"i]或[type="button" i]都行，但[type="button" I]（大写）、[type="button"] i（括号外）、:is([type="button" i])（伪类内）全部无效 - 只对带引号的属性选择器生效：
[attr]和[attr=val]（无引号）不支持i - 支持所有匹配类型：
[attr="val" i]、[attr~="val" i]、[attr*="val" i]、[attr^="val" i]、[attr$="val" i] - 仅折叠 ASCII 字母，对中文、德语 ß、土耳其语 İ 等无影响
什么时候必须加 i，什么时候可以不加
必须加 i 的场景很明确：
- 表单
type值来自用户输入或旧系统（"TEXT"/"text"/"Text"混用） - JS 动态设置
data-属性，无法保证大小写统一 - 接入富文本编辑器、CMS 输出或第三方 HTML 片段，属性值不可控
可以不加 i 的前提只有一个：项目全程可控，HTML 和 CSS 中所有属性值始终用小写书写并保持一致。这不是“推荐做法”，而是**唯一能安全省略 i 的条件**。
容易被忽略的是：即使你写了 [lang|="zh" i]，也远不如直接用 [lang^="zh"] 稳定，因为语言子码匹配本身不依赖大小写折叠，且避免了 i 在部分老旧环境下的兼容性风险。
