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

Question

我到处都读到CSS不区分大小写，但是我有这个选择器

.holiday-type.Selfcatering

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

<div class="holiday-type Selfcatering">

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

.holiday-type.SelfCatering

这样就不会拾取样式。

Answer 1

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

但是HTML类名 _是_区分大小写的（见属性定义），这就是导致你的第二个例子不匹配。HTML5中没有更改。1个

这是因为选择器的区分大小写取决于文档语言的含义：

在ASCII范围内，所有Selectors语法均不区分大小写（即[az]和[AZ]等效），但不受Selectors控制的部分除外。选择器中文档语言元素名称，属性名称和属性值的区分大小写取决于文档语言。

因此，给定一个具有Selfcatering类但没有SelfCatering类的HTML元素，选择器.Selfcatering和[class~="Selfcatering"]将匹配它，而选择器.SelfCatering和[class~="SelfCatering"]将不匹配
。2

如果文档类型将类名定义为不区分大小写，则无论如何都会有一个匹配项。

1
在所有浏览器的怪癖模式下，类和ID不区分大小写。这意味着大小写不匹配的选择器将始终匹配。由于遗留原因，此行为在所有浏览器中都是一致的，并在本文中进行了提及。

2 值得一提的是，选择器4级)包含一个建议的语法，用于强制使用[class~="Selfcatering"i]或对属性值进行不区分大小写的搜索[class~="SelfCatering"i]。这两个选择器都会将HTML或XHTML元素与一个Selfcatering类或一个SelfCatering类（或者，当然两者）匹配。但是，类或ID选择器还没有这样的语法（还可以吗？），可能是因为它们具有与常规属性选择器（没有 关联的语义）不同的语义，或者是因为很难提出可用的语法。