我到处都读到CSS不区分大小写，但是我有这个选择器
.holiday-type.Selfcatering
当我像这样在HTML中使用时，它会被拾取
<div class="holiday-type Selfcatering">
如果我这样改变上面的选择器
.holiday-type.SelfCatering
这样就不会拾取样式。
有人在说谎。
CSS选择器中的类名是否区分大小写？
在怪癖模式下，使用CSS class和时，所有浏览器的行为都区分大小写id names。
在怪癖模式下，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 class或您的id names行为，case insensitive请检查您的文档类型。
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>
也许不是谎言，但需要澄清。
实际的CSS本身不区分大小写。
例如
wiDth:100%;
但是名称，它们必须区分大小写才能成为唯一标识符。
希望能有所帮助。
CSS选择器通常不区分大小写；这包括类和ID选择器。
但是HTML类名是区分大小写的（见属性定义），这就是导致你的第二个例子不匹配。HTML5中没有更改。1个
这是因为选择器的区分大小写取决于文档语言的含义：
因此，给定一个具有
Selfcatering类但没有SelfCatering类的HTML元素，选择器.Selfcatering和[class~="Selfcatering"]将匹配它，而选择器.SelfCatering和[class~="SelfCatering"]将不匹配 。2如果文档类型将类名定义为不区分大小写，则无论如何都会有一个匹配项。
1 在所有浏览器的怪癖模式下，类和ID不区分大小写。这意味着大小写不匹配的选择器将始终匹配。由于遗留原因，此行为在所有浏览器中都是一致的，并在本文中进行了提及。
2 值得一提的是，选择器4级包含一个建议的语法，用于强制使用
[class~="Selfcatering" i]或对属性值进行不区分大小写的搜索[class~="SelfCatering" i]。这两个选择器都会将HTML或XHTML元素与一个Selfcatering类或一个SelfCatering类（或者，当然两者）匹配。但是，对于类或ID选择器还没有这样的语法（还可以吗？），可能是因为它们具有与常规属性选择器（没有关联的语义）不同的语义，或者是因为很难提出可用的语法。