CSS 选择器中的类名是否区分大小写? [英] Are class names in CSS selectors case sensitive?

问题描述

我一直在读到 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 语义)，或者因为很难找到使用可用的语法.}

² _{For what it's worth, Selectors level 4 contains a proposed syntax for forcing a case-insensitive search on attribute values using [class~="Selfcatering" i] or [class~="SelfCatering" i]. Both selectors will match an HTML or XHTML element with either a Selfcatering class or a SelfCatering class (or, of course, both). However there is no such syntax for class or ID selectors (yet?), presumably because they carry different semantics from regular attribute selectors (which have no semantics associated with them), or because it's difficult to come up with a usable syntax.}

这篇关于CSS 选择器中的类名是否区分大小写?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！