我一直在阅读 CSS 不区分大小写的文章,但我有这个选择器
.holiday-type.Selfcatering
当我像这样在我的 HTML 中使用它时,它会被拾取
<div class="holiday-type Selfcatering">
如果我像这样更改上面的选择器
.holiday-type.SelfCatering
然后样式不会被拾取。
有人在说谎。
我一直在阅读 CSS 不区分大小写的文章,但我有这个选择器
.holiday-type.Selfcatering
当我像这样在我的 HTML 中使用它时,它会被拾取
<div class="holiday-type Selfcatering">
如果我像这样更改上面的选择器
.holiday-type.SelfCatering
然后样式不会被拾取。
有人在说谎。
CSS 选择器通常不区分大小写;这包括类和 ID 选择器。
但是HTML 类名区分大小写(请参阅属性定义),这会导致您的第二个示例不匹配。这在HTML5中没有改变。1
这是因为选择器的大小写敏感性取决于文档语言的内容:
所有选择器语法在 ASCII 范围内都不区分大小写(即 [az] 和 [AZ] 是等效的),除了不受选择器控制的部分。选择器中的文档语言元素名称、属性名称和属性值是否区分大小写取决于文档语言。
因此,给定一个带有Selfcatering
类但没有SelfCatering
类的 HTML 元素,选择器.Selfcatering
and[class~="Selfcatering"]
将匹配它,而选择器 .SelfCatering
and[class~="SelfCatering"]
不会。2
如果文档类型将类名定义为不区分大小写,那么无论如何您都会有匹配项。
1 在所有浏览器的 quirks 模式下,类和 ID 不区分大小写。这意味着大小写不匹配的选择器将始终匹配。由于遗留原因,此行为在所有浏览器中都是一致的,并在本文中有所提及。
2 对于它的价值,选择器级别 4[class~="Selfcatering" i]
包含一个建议的语法,用于强制使用or对属性值进行不区分大小写的搜索[class~="SelfCatering" i]
。两个选择器都会将 HTML 或 XHTML 元素与一个Selfcatering
类或一个SelfCatering
类(当然,两者兼有)进行匹配。然而,类或 ID 选择器还没有这样的语法(还没有?),大概是因为它们带有与常规属性选择器不同的语义(没有与之关联的语义),或者因为很难提出可用的语法。
也许不是谎言,但需要澄清。
实际的 CSS 本身不区分大小写。
例如
wiDth:100%;
但是名称,它们必须区分大小写才能成为唯一标识符。
希望有帮助。
在 quirks 模式下,所有浏览器在使用 CSS 类和 id 名称时都表现得不区分大小写。
在 quirks 模式下,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 类或 id 名称不区分大小写,请检查您的文档类型。
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>