Question

我一直在阅读CSS不区分大小写，但我有这个选择器

.holiday-type.Selfcatering

当我在我的HTML中使用时，就像这样，获取

<div class="holiday-type Selfcatering">

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

.holiday-type.SelfCatering

然后风格没有被提起。

有人说谎。

Answer 1

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

但是HTML class names are case-sensitive（参见属性定义），这导致你的第二个例子不匹配。这在HTML5。¹

中没有改变

这是因为选择器is dependent on what the document language says的区分大小写：

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

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

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

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

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

Answer 2

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

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

例如

wiDth:100%;

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

希望有所帮助。

Answer 3

在使用CSS class和id names时，在怪癖模式下，所有浏览器都表现得像不区分大小写。

在quirks模式下，CSS类和id名称不区分大小写。在标准模式它们区分大小写。（这也适用于 getElementsByClassName。）read more...

有时候当你有像贝娄这样的错误文档时，你的浏览器会进入怪癖模式。

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

您应该使用标准doctype

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 Transitional

<!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 Strict

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

XHTML 1.0 Transitional

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

XHTML 1.0 Frameset

<!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 class或id names行为case insensitive，请检查您的文档类型。

Answer 4

CSS不区分大小写。

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

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

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

注意：在html怪癖模式下，css不区分大小写，即使对于ID和类（如果删除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>

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

4 个答案: