类名在css选择器中是否区分大小写取决于html文档模式：标准html下不区分，xhtml下区分；标签名因html解析器强制小写化而不区分；属性选择器默认区分大小写，需加i标志忽略。
类名在 CSS 选择器中是否区分大小写，取决于它在 HTML 中的解析模式，而不是 CSS 自身“规定”了类名必须区分或不区分；标签名不区分大小写，是因为 HTML 规范明确要求浏览器对标签名做大小写归一化处理——实际匹配时根本不存在大小写差异。
HTML 标签名被强制转为小写，所以不区分
浏览器解析 HTML 时，所有标准标签名（div、SPAN、ImG）都会被统一转成小写再构建 DOM。这意味着 document.querySelector('SPAN') 和 document.querySelector('span') 都能命中同一个元素，CSS 选择器里的 span、Span、SPAN 全部等价。
- 这是 HTML 解析器的行为，不是 CSS 引擎的“宽容”
- XML/XHTML 模式下例外：如果文档类型是
application/xhtml+xml，标签名就严格区分大小写，但这种用法已基本淘汰 - 自定义元素（如
my-button）也遵循 HTML 规则，不区分大小写
类名本质是属性值，大小写行为由文档模式决定
class 是 HTML 元素的一个属性，它的值（比如 nav、Nav、NAV）在标准 HTML 模式下不区分大小写——.Nav 能匹配 class="nav"，因为浏览器在匹配 class 属性值时做了大小写无关处理。
- 这个行为仅限于 HTML 文档（
），且是浏览器对 HTML 规范的实现，不是 CSS 的语法特性 - 若页面缺失 DOCTYPE 进入怪异模式，旧版 IE 曾有过大小写敏感表现，现代浏览器已不再复现
- XML/XHTML 文档中，
class是普通属性，值严格区分大小写：class="Nav"不会被.nav匹配
属性选择器默认区分大小写，[class="Nav"] 和 .Nav 行为不同
这是最容易混淆的点：.Nav 是类选择器，走 HTML 的 class 匹配逻辑（不区分）；而 [class="Nav"] 是属性选择器，按规范默认区分大小写——它不会匹配 class="nav"。
- 想让属性选择器忽略大小写，必须加
i标志：[class="nav" i] -
i必须紧贴右括号，不能有空格：[class="nav" i]✅，[class="nav" i ]❌ -
i只对当前属性选择器生效，不影响前面的类名或后面的选择器部分 - IE 完全不支持
i，Edge 16+ 及所有现代浏览器支持
为什么开发中建议统一小写类名
虽然标准模式下 .Button 和 .button 都能匹配 class="button"，但混用大小写会带来真实风险：
- 服务端模板或 JS 动态拼接 class 时，大小写不一致会导致属性选择器（
[class="Button"]）完全失效 - 团队协作中，
data-foo和data-Foo在属性选择器里就是两个东西，不加i就不匹配 - CSS-in-JS 或 Web Components 中，Shadow DOM 的样式作用域可能更依赖字面匹配，大小写敏感性更容易暴露
- 工具链（如 PostCSS、Prettier）通常默认按小写规范化，大写写法可能被自动改掉，引发意外交互
事情说清了就结束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
