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

229

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

.holiday-type.Selfcatering

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

<div class="holiday-type Selfcatering">

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

.holiday-type.SelfCatering

这样就不会拾取样式。

有人在说谎。

html css css-selectors

— 萨钦·凯恩斯（Sachin Kainth）
source

55

这个故事的寓意一直都是大小写敏感的-不要来回弹跳。您会发现您的代码更易于阅读，任何拾起您剩菜剩饭的人都会感激它。

— kingdango 2012年

3

我从现在开始将其视为区分大小写。class =“ Price”不起作用，class =“ price”不起作用，因此在日常工作中它们都是区分大小写的。

— Tino Mclaren 2014年

4

看到一个完整的“案例矩阵”，有关的情况下的灵敏度特性的值和选择。

— 彼得·克劳斯

5

有趣的是，我一直在我的班级名称中使用camelCase，但是CSS在iOS Webview上没有使用。所以道德是，总是在课堂上使用破折号。

— EpicPandaForce 2015年

242

CSS选择器通常不区分大小写；这包括类和ID选择器。

但是HTML类名是区分大小写的（见属性定义），这就是导致你的第二个例子不匹配。HTML5中没有更改。^1个

这是因为选择器的区分大小写取决于文档语言的含义：

在ASCII范围内，所有选择器语法均不区分大小写（即[az]和[AZ]等效），但不受选择器控制的部分除外。选择器中文档语言元素名称，属性名称和属性值的区分大小写取决于文档语言。

因此，给定一个具有Selfcatering类但没有SelfCatering类的HTML元素，选择器.Selfcatering和[class~="Selfcatering"]将匹配它，而选择器.SelfCatering和[class~="SelfCatering"]将不匹配。²

如果文档类型将类名定义为不区分大小写，则无论如何都会有一个匹配项。

¹ _{在所有浏览器的怪癖模式下，类和ID不区分大小写。这意味着大小写不匹配的选择器将始终匹配。由于遗留原因，此行为在所有浏览器中都是一致的，并在本文中进行了提及。}

² _{值得一提的是，选择器4级包含一个建议的语法，用于强制使用[class~="Selfcatering" i]或对属性值进行不区分大小写的搜索[class~="SelfCatering" i]。这两个选择器都会将HTML或XHTML元素与一个Selfcatering类或一个SelfCatering类（或者，当然两者）匹配。但是，类或ID选择器还没有这样的语法（还可以吗？），可能是因为它们具有与常规属性选择器（没有关联的语义）不同的语义，或者是因为很难提出可用的语法。}

— BoltClock
source

7

哇，这与我的jsfiddle测试表明的相反。在那里，div并且DIV两者相匹配的选择<div>，但id和类名选择必须是完全区分大小写。除非我误解了你的答案？

— 冰冻豌豆罗迪（Roddy of the Frozen Peas）2012年

21

@Frozen Peas：因为HTML类和ID区分大小写，而标签名称却不区分大小写。由于这个原因，我特意将标签名称留在了答案之外。（顺便说一句，在真正的XHTML中，标记名称仅区分大小写，与文档类型无关，如果jsFiddle可以让您强制将页面用作application / xhtml + xml，则DIV选择器将不再匹配。）

— BoltClock

2

@BoltClock“文档语言”在这里是什么意思？

— 极客

4

@Geek：“文档语言”是指您将CSS应用于任何语言，最常见的是HTML，XHTML或XML。您可以在此处找到定义。

— BoltClock

2

还有其他人完全困惑吗？如果选择的情况下，在敏感的，则根据定义，不使CSS类（相对于选择选择它们）的情况下在敏感吗？换句话说，相对于彼此（CSS类和选择器）-如果一个不区分大小写，则意味着它们两者都是相同的。换句话说-如果我的选择器是.selfcatering并且选择器不区分大小写，为什么要关心该类是Selfcatering还是SelfCatering或sElfcAtErInG？我想念什么？

— jbyrd

62

也许不是谎言，但需要澄清。

实际的CSS本身并不区分大小写。

例如

wiDth:100%;

但是名称，它们必须区分大小写才能成为唯一标识符。

希望能有所帮助。

— 杰克·斯通
source

20

在怪癖模式下，使用CSS类和ID名称时，所有浏览器的行为都区分大小写。

在怪癖模式下，CSS类和ID名称不区分大小写。在标准模式下，它们区分大小写。（这也适用于getElementsByClassName。）了解更多。

有时，当您有错误的文档类型（如波纹管）时，浏览器将进入怪异模式。

<!DOCTYPE html PUBLIC>
<!DOCTYPE html anytext>

您应该使用标准文档类型

HTML 5

<!DOCTYPE html>

HTML 4.01严格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01过渡版

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

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过渡版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

如果您的CSS类或ID名称不区分大小写，请检查您的文档类型。

— 穆罕默德·希拉里扎德（Mohamad Shiralizadeh）
source

3

CSS不区分大小写。

但是在HTML5中，类和ID区分大小写

因此，CSS属性，值，伪类名称，伪元素名称，元素名称不区分大小写

CSS类id，url，font-families区分大小写。

注意：在html quirks模式下，css不区分大小写，即使对于ID和class也是如此（如果删除doctype声明）

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>

— 交换
source