CSS属性选择器大小写敏感吗？

本文深入解析了CSS中各类选择器与API在大小写处理上的微妙差异：HTML标准模式下class/id选择器不区分大小写，而XML/XHTML中严格区分；属性选择器默认区分大小写，但可通过[i]标志实现忽略大小写的匹配（现代浏览器支持，IE除外）；伪类名如:nth-child()等完全不涉及大小写问题，因其本身为ASCII不敏感关键字；此外还揭示了getComputedStyle()与element.style在属性命名上的关键区别——前者用短横线小写，后者用驼峰式，混用将导致静默失败。掌握这些细节，能帮你避开大量隐蔽的兼容性与调试陷阱。

class 和 id 选择器在 HTML 中是否区分大小写

不区分。HTML 元素的 class 和 id 属性值本身不区分大小写，但 CSS 选择器匹配时，**实际行为取决于文档解析模式**。

关键点在于：HTML 文档以 开头（即标准模式）时，浏览器会按 HTML 规范处理——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 属性名用短横线小写。混用就会读不到值，而且不会报错，静默失败。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~