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类名 是区分大小写的（请参阅属性定义），这会导致您的第二个示例不匹配。 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范围内不区分大小写（即[az]和[AZ ]是等效的），除了不在选择器控制下的部分。

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] 不会。 2

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.²

¹ _{在所有浏览器的怪异模式下，类和ID不区分大小写。这意味着大小写不匹配的选择器总是匹配。出于传统原因，此行为在所有浏览器中都是一致的，在本文中有提及。 / sub>}

¹ _{In quirks mode for all browsers, classes and IDs are case-insensitive. This means case-mismatching selectors will always match. This behavior is consistent across all browsers for legacy reasons, and is mentioned in this article.}

² _{对于值得的，选择器级别4 包含一个建议的语法，用于强制使用 [class〜=Selfcateringi] 或 [class〜=SelfCateringi] 。这两个选择器将匹配一个HTML或XHTML元素与 Selfcatering 类或 SelfCatering 类（或者，都）。然而，对于类或ID选择器（还没有），没有这样的语法，可能是因为它们携带与常规属性选择器（其具有与它们相关联的无语义）不同的语义，具有可用的语法。}

² _{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屋！