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

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

.holiday-type.Selfcatering

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

<div class="holiday-type Selfcatering">

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

.holiday-type.SelfCatering

这样风格就不会被采纳。

有人在说谎。

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

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

这是因为选择器的大小写敏感性取决于文档语言:

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

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

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

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

2 For what it's worth, Selectors level 4 contains a proposed syntax for forcing a case-insensitive search on attribute values using [class~="Selfcatering" i] or [class~="SelfCatering" i]. Both selectors will match an HTML or XHTML element with either a Selfcatering class or a SelfCatering class (or, of course, both). However there is no such syntax for class or ID selectors (yet?), presumably because they carry different semantics from regular attribute selectors (which have no semantics associated with them), or because it's difficult to come up with a usable syntax.

2012-09-21 15:54:38

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

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

例如

wiDth:100%;

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

2012-09-21 15:55:08

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

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

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

<!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。

2015-02-17 06:34:49

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>

2019-08-31 12:54:59

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

推荐文章

最新文章

标签