Html CSS 选择器中的类名是否区分大小写？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12533926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Are class names in CSS selectors case sensitive?
提问by Sachin Kainth
I keep reading everywhere that CSS is not case sensitive, but I have this selector
我一直在阅读 CSS 不区分大小写的所有地方，但我有这个选择器
.holiday-type.Selfcatering
which when I use in my HTML, like this, gets picked up
当我在我的 HTML 中使用它时，像这样，被选中
<div class="holiday-type Selfcatering">
If I change the above selector like this
如果我像这样更改上面的选择器
.holiday-type.SelfCatering
Then the style does not get picked up.
然后风格不会被接受。
Someone is telling lies.
有人在说谎。
回答by BoltClock
CSS selectors are generally case-insensitive; this includes class and ID selectors.
CSS 选择器通常不区分大小写；这包括类和 ID 选择器。
But HTML class names arecase-sensitive(see the attribute definition), and that's causing a mismatch in your second example. This has not changed in HTML5.1
但是HTML类名是区分大小写的（见属性定义），这就是导致你的第二个例子不匹配。这在HTML5 中没有改变。1
This is because the case-sensitivity of selectors is dependent on what the document language says:
这是因为选择器的大小写敏感取决于文档语言所说的内容：
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.
所有 Selectors 语法在 ASCII 范围内都不区分大小写（即 [az] 和 [AZ] 是等效的），但不受 Selectors 控制的部分除外。选择器中文档语言元素名称、属性名称和属性值的区分大小写取决于文档语言。
So, given an HTML element with a Selfcateringclass but without a SelfCateringclass, the selectors .Selfcateringand [class~="Selfcatering"]will match it, while the selectors .SelfCateringand [class~="SelfCatering"]would not.2
因此，给定一个带有Selfcatering类但没有SelfCatering类的 HTML 元素，选择器.Selfcatering和[class~="Selfcatering"]将匹配它，而选择器 .SelfCatering和 则[class~="SelfCatering"]不会。2
If the document type defined class names as case-insensitive, then you would have a match regardless.
如果文档类型将类名定义为不区分大小写，那么无论如何你都会有一个匹配项。
1In 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.
1在所有浏览器的 quirks 模式下，类和 ID 不区分大小写。这意味着大小写不匹配的选择器将始终匹配。由于遗留原因，这种行为在所有浏览器中都是一致的，本文中提到了这一点。
2For what it's worth, Selectors level 4contains 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 Selfcateringclass or a SelfCateringclass (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 nosemantics associated with them), or because it's difficult to come up with a usable syntax.
2就其价值而言，选择器级别 4包含一个建议的语法，用于使用[class~="Selfcatering" i]或强制对属性值进行不区分大小写的搜索[class~="SelfCatering" i]。两个选择器都会将 HTML 或 XHTML 元素与Selfcatering类或SelfCatering类（或者，当然，两者）进行匹配。然而，类或 ID 选择器没有这样的语法（还没有？），大概是因为它们携带与常规属性选择器不同的语义（没有与之相关的语义），或者因为很难提出可用的语法。
回答by Hyman Stone
Perhaps not a lie, but need for clarification.
也许不是谎言，但需要澄清。
The actual css itself is not case sensitive.
实际的 css 本身不区分大小写。
For example
例如
wiDth:100%;
but the names, they must be case sensitive to be unique identifiers.
但是名称，它们必须区分大小写才能成为唯一标识符。
Hope that helps.
希望有帮助。
回答by Mohamad Shiralizadeh
In quirks mode all browsers behave like case-insensitivewhen using CSS class and id names.
在 quirks 模式下，所有浏览器在使用 CSS 类和 id 名称时都表现得不区分大小写。
In quirks mode CSS class and id names are case insensitive. In standards mode they are case sensitive. (This also applies to getElementsByClassName.) Read more.
在 quirks 模式下，CSS 类和 id 名称不区分大小写。在标准模式下，它们区分大小写。（这也适用于 getElementsByClassName。）阅读更多。
Sometimes when you have wrong doctypes like bellow, your browser goes in quirks mode.
有时，当您有错误的文档类型时，例如 bellow，您的浏览器会进入 quirks 模式。
<!DOCTYPE html PUBLIC>
<!DOCTYPE html anytext>
you should use standard doctype
你应该使用标准的文档类型
HTML 5
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
HTML 4.01 严格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
HTML 4.01 过渡
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
HTML 4.01 框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
XHTML 1.0 严格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
XHTML 1.0 过渡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
XHTML 1.0 框架集
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
if your CSS class or id names behaves case insensitive please check your doctype.
如果您的 CSS 类或 id 名称不区分大小写，请检查您的文档类型。
回答by Swap
CSS is case insensitive.
CSS 不区分大小写。
But in HTML5 the class and ID are case sensitive
但在 HTML5 中，类和 ID 区分大小写
So, CSS properties, values, pseudo class names, pseudo element names, element names are case insensitive
所以，CSS 属性、值、伪类名、伪元素名、元素名不区分大小写
And CSS class, id , urls, font-families are case sensitive.
并且 CSS 类、 id 、 urls 、 font-families 是区分大小写的。
note : in html quirks mode the css is case insensitive even for ID and class (if you remove doctype declaration)
注意：在 html quirks 模式下，即使对于 ID 和类，css 也不区分大小写（如果删除 doctype 声明）
Example on CodePen : https://codepen.io/swapnilPakolu/pen/MWgvQyB?&editable=true#anon-signup
CodePen 示例：https://codepen.io/swapnilPakolu/pen/MWgvQyB ?&editable =true#anon-signup
<!DOCTYPE html>
<html>
<head>
<title>CSS case sensitive ?</title>
<style>
P#id
{color:RED;}
p#ID
{font-size:30PX;}
#iD
{BORDER:4px solid blue;}
.class
{text-decoration:underLine;}
.CLASS
{background-color:graY;}
.Class
{font-weight:900;}
#ID::afTeR
{conTent:"colored text";
disPlay:bLock;
color:#fAdAcA;}
.class:hoVeR
{background-color:lightblue;}
</style>
</head>
<body>
<p id="id" class="class">red and underline</p>
<p id="ID" class="CLASS">30px font size and gray background</p>
<p id="iD" class="Class">bold and blue border</p>
</body>
</html>
