CSS 选择器中的类名是否区分大小写?

问题描述

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

I keep reading everywhere that CSS is not case sensitive, but I have this selector

.holiday-type.Selfcatering

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

which when I use in my HTML, like this, gets picked up

<div class="holiday-type Selfcatering">

如果我像这样改变上面的选择器

If I change the above selector like this

.holiday-type.SelfCatering

那么样式不会被拾取.

有人在说谎.

推荐答案

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

CSS selectors are generally case-insensitive; this includes class and ID selectors.

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

But HTML class names are case-sensitive (see the attribute definition), and that's causing a mismatch in your second example. This has not changed in HTML5.¹

这是因为选择器的大小写敏感性取决于文档的内容语言说:

This is because the case-sensitivity of selectors is dependent on what the document language says:

所有选择器语法在 ASCII 范围内不区分大小写(即 [a-z] 和 [A-Z] 是等效的)，除了不受选择器控制的部分.选择器中的文档语言元素名称、属性名称和属性值是否区分大小写取决于文档语言.

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"] 不会.²

So, given an HTML element with a Selfcatering class but without a SelfCatering class, the selectors .Selfcatering and [class~="Selfcatering"] will match it, while the selectors .SelfCatering and [class~="SelfCatering"] would not.²

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

If the document type defined class names as case-insensitive, then you would have a match regardless.

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

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