我到处都读到CSS不区分大小写,但是我有这个选择器
.holiday-type.Selfcatering
当我像这样在HTML中使用时,它会被拾取
<div class="holiday-type Selfcatering">
如果我这样改变上面的选择器
.holiday-type.SelfCatering
这样就不会拾取样式。
CSS选择器通常不区分大小写;这包括类和ID选择器。
但是HTML类名 _是_区分大小写的(见属性定义),这就是导致你的第二个例子不匹配。HTML5中没有更改。1个
这是因为选择器的区分大小写取决于文档语言的含义:
在ASCII范围内,所有Selectors语法均不区分大小写(即[az]和[AZ]等效),但不受Selectors控制的部分除外。选择器中文档语言元素名称,属性名称和属性值的区分大小写取决于文档语言。
因此,给定一个具有Selfcatering类但没有SelfCatering类的HTML元素,选择器.Selfcatering和[class~="Selfcatering"]将匹配它,而选择器.SelfCatering和[class~="SelfCatering"]将不匹配 。2
Selfcatering
SelfCatering
.Selfcatering
[class~="Selfcatering"]
.SelfCatering
[class~="SelfCatering"]
如果文档类型将类名定义为不区分大小写,则无论如何都会有一个匹配项。
1 在所有浏览器的怪癖模式下,类和ID不区分大小写。这意味着大小写不匹配的选择器将始终匹配。由于遗留原因,此行为在所有浏览器中都是一致的,并在本文中进行了提及。
2 值得一提的是,选择器4级)包含一个建议的语法,用于强制使用[class~="Selfcatering"i]或对属性值进行不区分大小写的搜索[class~="SelfCatering"i]。这两个选择器都会将HTML或XHTML元素与一个Selfcatering类或一个SelfCatering类(或者,当然两者)匹配。但是,类或ID选择器还没有这样的语法(还可以吗?),可能是因为它们具有与常规属性选择器(没有 关联的语义)不同的语义,或者是因为很难提出可用的语法。
[class~="Selfcatering"i]
[class~="SelfCatering"i]