HTML中class和id选择器在标准模式下不区分大小写，但XML/XHTML中严格区分；属性选择器默认区分大小写，可用[i]标志忽略；CSS伪类名本身不区分大小写。
class 和 id 选择器在 HTML 中是否区分大小写
不区分。HTML 元素的 class 和 id 属性值本身不区分大小写，但 CSS 选择器匹配时，**实际行为取决于文档解析模式**。
关键点在于：HTML 文档以 开头（即标准模式）时，浏览器会按 HTML 规范处理——<code>class="Nav" 和 .nav 能匹配；但若缺失 DOCTYPE 进入怪异模式（Quirks Mode），部分旧引擎（如 IE）曾将 class/id 视为大小写敏感，现已基本不可见。
- 现代浏览器在标准模式下，
.NAV、.Nav、.nav都能匹配class="nav" - XML 或 XHTML 文档（application/xhtml+xml）中，class/id 是严格区分大小写的，因为 XML 本身区分大小写
- 使用
document.querySelector('.Nav')在 HTML 页面中仍能命中class="nav"，这是 DOM API 对 HTML 模式的适配，不是 CSS 引擎本身的行为
属性选择器 [attr=value] 在 HTML 中是否区分大小写
默认区分，但可显式声明不区分。
HTML 中，[data-role="header"] 不会匹配 data-role="Header"；但加上 i 标志即可忽略大小写：[data-role="header" i]。
立即学习“前端免费学习笔记（深入）”；
-
[lang="en"]匹配lang="en"，但不匹配lang="EN" -
[lang="en" i]同时匹配lang="en"、lang="EN"、lang="En" -
i标志仅在 HTML 文档中有效，在 XML/XHTML 中无效（那里本就区分大小写） - 注意：IE 完全不支持
i标志，Edge 16+ 和所有现代浏览器支持
伪类 :nth-child() 和 :nth-of-type() 的大小写无关性
完全无关——它们不涉及字符串匹配，只依赖元素类型和位置计数。
这两个伪类内部参数是数字或公式（如 2n+1），不包含任何需比较的文本值，因此不存在“大小写敏感”问题。你写成 :NTH-CHILD(2n+1) 或 :nth-child(2n+1) 效果一样，因为 CSS 选择器名本身不区分大小写（CSS 规范定义所有 CSS 关键字为 ASCII case-insensitive）。
-
:first-child、:FIRST-CHILD、:First-Child等价 - 但自定义属性名（如
data-Foo）在属性选择器中仍受前述规则约束：[data-foo="x"]不匹配data-Foo="x"，除非加i - 别依赖大写写法，统一小写更安全，避免混淆
使用 getComputedStyle() 读取样式时的大小写陷阱
返回的 CSSStyleDeclaration 对象中，属性名始终是小写驼峰形式（如 backgroundColor），但原始 CSS 文件里写的是短横线分隔（background-color）——这跟“大小写敏感”无关，而是 DOM API 的标准化映射规则。
真正容易踩坑的是：用 element.style.xxx 直接读内联样式时，必须用驼峰；而用 getComputedStyle(element).getPropertyValue('background-color') 则必须用原始 CSS 名（含短横线、小写）。
-
element.style.backgroundColor = 'red'✅ -
element.style.background-color = 'red'❌（语法错误） -
getComputedStyle(el).getPropertyValue('Background-Color')❌（返回空字符串） -
getComputedStyle(el).getPropertyValue('background-color')✅
大小写在这里只是表象，本质是两类 API 的命名约定不同：DOM 属性用驼峰，CSS 属性名用短横线小写。混用就会读不到值，而且不会报错，静默失败。
