html - CSS 选择器中的类名是否区分大小写？

Question

我一直在读到 CSS 不区分大小写，但我有这个选择器

.holiday-type.Selfcatering

当我像这样在我的 HTML 中使用时，会被拾取

<div class="holiday-type Selfcatering">

如果我像这样更改上述选择器

.holiday-type.SelfCatering

那么样式不会被拾取。

有人在说谎。

Answer 1

CSS 选择器通常不区分大小写；这包括类和 ID 选择器。

但是HTML class names are case-sensitive (请参阅属性定义)，这导致您的第二个示例不匹配。这在 HTML5 中没有改变.¹

这是因为选择器的大小写敏感 is dependent on what the document language says :

All Selectors syntax is case-insensitive within the ASCII range (i.e. [a-z] and [A-Z] are equivalent), except for parts that are not under the control of Selectors. The case sensitivity of document language element names, attribute names, and attribute values in selectors depends on the document language.

所以，给定一个带有 SelfCatering 类但没有 SelfCatering 类的 HTML 元素，选择器 .Selfcatering 和 [class ~="SelfCatering"] 会匹配它，而选择器 .SelfCatering 和 [class~="SelfCatering"] 不会。²

如果文档类型将类名定义为不区分大小写，那么无论如何都会匹配。

---

¹ _{在所有浏览器的 quirks 模式下，类和 ID 不区分大小写。这意味着大小写不匹配的选择器将始终匹配。由于遗留原因，此行为在所有浏览器中都是一致的，并且在 this article 中有所提及。 .}

² _{物有所值，Selectors level 4包含一个建议的语法，用于使用 [class~="SelfCatering"i] 或 [class~="SelfCatering"i] 对属性值进行不区分大小写的搜索。两个选择器都将与 SelfCatering 类或 SelfCatering 类(当然，两者兼有)的 HTML 或 XHTML 元素匹配。然而，类或 ID 选择器没有这样的语法(还没有？)，大概是因为它们携带与常规属性选择器不同的语义(与它们相关联的 no 语义)，或者因为很难找到使用可用的语法。}