一尘不染

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

html

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

.holiday-type.Selfcatering

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

<div class="holiday-type Selfcatering">

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

.holiday-type.SelfCatering

这样就不会拾取样式。


阅读 734

收藏
2020-05-10

共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选择器还没有这样的语法(还可以吗?),可能是因为它们具有与常规属性选择器(没有 关联的语义)不同的语义,或者是因为很难提出可用的语法。

2020-05-10