CSS选择器中的类名区分大小写吗?

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

.holiday-type.Selfcatering

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

<div class="holiday-type Selfcatering">

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

.holiday-type.SelfCatering

这样风格就不会被采纳。

有人在说谎。

80623 次浏览
小开
最佳答案

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

但是HTML类名是区分大小写(请参阅属性定义)，这将导致第二个示例中的不匹配。这在HTML5.1中没有改变

这是因为选择器的大小写敏感是否依赖于文档语言:

所有选择器语法在ASCII范围内都是不区分大小写的(即[a-z]和[a-z]是等效的)，除了不在选择器控制之下的部分。选择器中文档语言元素名称、属性名称和属性值的大小写敏感性取决于文档语言。

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

如果文档类型定义的类名不区分大小写，那么无论如何都会有匹配。

1 在所有浏览器的怪异模式下，类和id是不区分大小写的。这意味着大小写不匹配的选择器总是匹配的。由于遗留的原因，这种行为在所有浏览器中都是一致的，并且在本文中提到过。

2 值得注意的是，选择器级别4包含了一个建议语法，用于强制使用__ABC0或__ABC1对属性值进行不区分大小写的搜索。这两个选择器都将用__ABC2类或SelfCatering类(当然，两者都有)来匹配HTML或XHTML元素。然而，类或ID选择器还没有这样的语法(还没有?)，可能是因为它们与常规的属性选择器(具有no语义)具有不同的语义，或者是因为很难提出可用的语法。

小开

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

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

例如

wiDth:100%;

但是名称必须区分大小写，是唯一的标识符。

希望这能有所帮助。

小开

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

在怪癖模式下，CSS的类名和id名不区分大小写。在 标准模式下，它们区分大小写。(这也适用于 getElementsByClassName) 阅读更多。 < / p >

有时候当你有错误的文档类型时，你的浏览器会进入怪癖模式。

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

<!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名称不区分大小写，请检查你的doctype。

小开

CSS不区分大小写。

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

CSS属性，值，伪类名，伪元素名，元素名是不区分大小写的

CSS类，id, url，字体族都是区分大小写的。

注意:在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>

提交答案