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

· 04月07日

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

.holiday-type.Selfcatering

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

<div class="holiday-type Selfcatering">

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

.holiday-type.SelfCatering

这样就不会拾取样式。

有人在说谎。

CSSHTML
回答(4)
时间
十三
4 · 2020-04-07 11:21:50

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

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

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

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

因此,给定一个具有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选择器还没有这样的语法(还可以吗?),可能是因为它们具有与常规属性选择器(没有关联的语义)不同的语义,或者是因为很难提出可用的语法。

D
Davaid前端神奇
3 · 2020-04-07 11:21:50

在怪癖模式,使用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请检查您的文档类型。

L
LEY
2 · 2020-04-07 11:21:50

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>
M
Mandy
1 · 2020-04-07 11:21:50

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

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

例如

wiDth:100%;

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

希望能有所帮助。

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序