为什么CSS中类名区分大小写而标签名不区分？-css教程-PHP中文网

HTML标签名不区分大小写是解析器的历史兼容设计，但规范强制要求小写；class属性值区分大小写，因属字符串匹配且受HTML文档模型约束，非CSS决定。

为什么css中类名区分大小写而标签名不区分？

HTML 标签名不区分大小写是解析器的历史兼容设计；类名（class 属性值）区分大小写，是因为它本质是字符串匹配，且受 HTML 规范和 DOM 行为双重约束——不是 CSS 决定的，而是 HTML 文档模型决定的。

HTML 解析器对标签名做了“归一化”处理

浏览器在解析 HTML 时，会把

、、 全部转成同一个内部节点类型 HTMLDivElement。这是 HTML5 规范明确要求的：标签名必须用 ASCII 小写字母，解析器必须执行大小写折叠（case-folding）。所以你写大写也能显示，但不是因为“支持大写”，而是因为被强制转小写了。这种归一化只作用于原生标签名，不延伸到属性值。

class 是属性值，不是语法关键字
class 属性本身（如 class="header" 中的 class）不区分大小写——CLASS、Class 都能被识别。但它的值 "header" 是纯字符串，匹配时按字面量比对。

											
												
												
													CSS婚礼策划服务机构宣传网站模板
													CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
												
												下载
												
											
										

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 里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！