CSS 选择器中的类名是不是区分大小写？
Posted
技术标签:
【中文标题】CSS 选择器中的类名是不是区分大小写？【英文标题】：Are class names in CSS selectors case sensitive?CSS 选择器中的类名是否区分大小写？ 【发布时间】：2012-09-14 01:50:30 【问题描述】：我一直在读到 CSS 不区分大小写，但我有这个选择器
.holiday-type.Selfcatering
当我像这样在我的 html 中使用时，会被拾取
<div class="holiday-type Selfcatering">
如果我像这样改变上面的选择器
.holiday-type.SelfCatering
那么样式不会被拾取。
有人在说谎。
【问题讨论】：
这个故事的寓意就是始终区分大小写——不要随意来回跳动。你会发现你的代码更容易阅读，任何捡起你的剩菜的人都会喜欢它。 从现在开始我将其视为区分大小写。 class="Price" 不起作用，class="price" 起作用，所以在日常生活中，它们区分大小写。 参见a complete "Case matrix"，关于属性值和选择器的区分大小写。 有趣的是，我一直在我的班级名称中使用 camelCase，但 CSS 并没有在 ios webview 上接受它。所以道德是，总是使用破折号换类。 @EpicPandaForce 认真的吗？有人知道行为是否改变了吗？我在我的应用中使用 camelCase 【参考方案1】：CSS 选择器通常不区分大小写；这包括类和 ID 选择器。
但是HTML class names are case-sensitive（请参阅属性定义），这导致您的第二个示例不匹配。这在HTML5 中没有改变。1
这是因为选择器is dependent on what the document language says 区分大小写：
所有选择器语法在 ASCII 范围内不区分大小写（即 [a-z] 和 [A-Z] 是等效的），但不受选择器控制的部分除外。选择器中的文档语言元素名称、属性名称和属性值是否区分大小写取决于文档语言。
因此，给定一个带有 Selfcatering 类但没有 SelfCatering 类的 HTML 元素，选择器 .Selfcatering 和 [class~="Selfcatering"] 将匹配它，而选择器 .SelfCatering 和 [class~="SelfCatering"] 不会。2
如果文档类型将类名定义为不区分大小写，那么无论如何都会匹配。
1在所有浏览器的 quirks 模式下，类和 ID 不区分大小写。这意味着大小写不匹配的选择器将始终匹配。由于遗留原因，此行为在所有浏览器中都是一致的，并在 this article 中提到。
2不管怎样，Selectors level 4 包含一个建议的语法，用于强制使用[class~="Selfcatering" i] 或[class~="SelfCatering" i] 对属性值进行不区分大小写的搜索。两个选择器都将匹配带有Selfcatering 类或SelfCatering 类（当然，两者兼有）的HTML 或XHTML 元素。然而，类或 ID 选择器还没有这样的语法（还没有？），大概是因为它们带有与常规属性选择器不同的语义（与它们相关联的 no 语义），或者因为很难找到使用可用的语法。
【讨论】：
哇，这与我的jsfiddle test 所表明的完全相反。div 和 DIV 选择器都匹配 <div>，但 id 和类名选择器必须完全区分大小写。除非我误解了你的回答？
@Roddy of the Frozen Peas：那是因为 HTML 类和 ID 区分大小写，而标签名称不区分。出于这个原因，我特别在我的答案中留下了标签名称。 （顺便说一句，标签名称仅在真正的 XHTML 中区分大小写，无论文档类型如何 - 如果 jsFiddle 可以让您强制将页面作为 application/xhtml+xml 提供，DIV 选择器将不再匹配。）
@BoltClock 这里的“文档语言”是什么意思？
@Geek：“文档语言”是指您应用 CSS 的任何语言，最常见的是 HTML、XHTML 或 XML。你可以找到here的定义。
还有其他人完全糊涂了吗？如果选择器区分大小写 in，那么根据定义，这不会使 CSS 类（相对于选择它们的选择器）大小写 in 也很敏感？换句话说，彼此相关（CSS 类和选择器）——如果其中一个不区分大小写，那么这意味着它们都是。换句话说 - 如果我的选择器是 .selfcatering 并且选择器不区分大小写，为什么要关心类是 Selfcatering 或 SelfCatering 还是 sElfcAtErInG？我错过了什么？【参考方案2】：
也许不是谎言，但需要澄清。
实际的 css 本身不区分大小写。
例如
wiDth:100%;
但是名称，它们必须区分大小写才能成为唯一标识符。
希望对您有所帮助。
【讨论】：
【参考方案3】：在 quirks 模式下，所有浏览器在使用 CSS 类和 id 名称时都表现得像不区分大小写。
在 quirks 模式下，CSS 类和 id 名称不区分大小写。在 标准模式，它们区分大小写。 （这也适用于 getElementsByClassName。）Read more.
有时当你有错误的文档类型时，你的浏览器会进入怪癖模式。
<!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 名称不区分大小写，请检查您的文档类型。
【讨论】：
【参考方案4】：CSS 不区分大小写。
但在 HTML5 中，类和 ID 区分大小写
所以，CSS 属性、值、伪类名、伪元素名、元素名不区分大小写
并且 CSS 类、id、urls、font-families 是区分大小写的。
注意：在 html quirks 模式下，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 选择器中的类名是不是区分大小写？的主要内容，如果未能解决你的问题，请参考以下文章