HTML标签名不区分大小写是解析器的历史兼容设计，但规范强制要求小写；class属性值区分大小写，因属字符串匹配且受HTML文档模型约束，非CSS决定。
HTML 标签名不区分大小写是解析器的历史兼容设计；类名（class 属性值）区分大小写，是因为它本质是字符串匹配，且受 HTML 规范和 DOM 行为双重约束——不是 CSS 决定的，而是 HTML 文档模型决定的。
HTML 解析器对标签名做了“归一化”处理
浏览器在解析 HTML 时，会把 <div>、<code><div>、<code><div> 全部转成同一个内部节点类型 <code>HTMLDivElement。这是 HTML5 规范明确要求的：标签名必须用 ASCII 小写字母，解析器必须执行大小写折叠（case-folding）。所以你写大写也能显示，但不是因为“支持大写”，而是因为被强制转小写了。
这种归一化只作用于原生标签名，不延伸到属性值。
class 是属性值，不是语法关键字
class 属性本身（如 class="header" 中的 class）不区分大小写——CLASS、Class 都能被识别。但它的值 "header" 是纯字符串，匹配时按字面量比对。
立即学习“前端免费学习笔记（深入）”；
- CSS 选择器
.Header不会匹配class="header"（标准模式下） -
document.querySelector('.Header')在 HTML 文档中可能命中（DOM API 做了 HTML 模式适配），但这不是 CSS 引擎的行为，而是查询接口的宽松实现 - 在 XHTML 或 XML 模式下（
application/xhtml+xml），.Header和class="header"完全不匹配——XML 严格区分大小写
为什么不能让 class 值也不区分大小写？
因为 class 值承担语义和逻辑职责，不是装饰性标记：
- 框架（如 React/Vue）靠
className或class绑定状态、条件渲染，大小写错位会导致 class 列表漏加或重复 - JS 操作
element.classList.add('Nav')与 CSS 中.nav不一致，样式就失效 - 服务端模板（如 Nunjucks、Jinja）或 SSR 工具链（Next.js、Nuxt）通常不做大小写归一，
class="{{ headerClass }}"输出class="Header"就真成了 Header -
[class~="nav"]这种属性选择器也区分大小写，没法靠它兜底
实际开发中最容易被忽略的一点
很多人以为 “CSS 选择器不区分大小写” 所以 .Nav 应该能匹配 class="nav"，但其实：CSS 选择器名（如 .class、#id、div）不区分大小写，而它们所匹配的 HTML 属性值（class 和 id 的内容）在 HTML 中虽允许松散匹配，但唯一可靠的行为是大小写完全一致。依赖浏览器的宽容，等于把 bug 埋进 CI 流水线或旧版 Safari 里。
