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

Sac*_*nth 220 html css css-selectors

我一直在阅读CSS不区分大小写,但我有这个选择器

.holiday-type.Selfcatering
Run Code Online (Sandbox Code Playgroud)

当我在我的HTML中使用时,就像这样,被拾起

<div class="holiday-type Selfcatering">
Run Code Online (Sandbox Code Playgroud)

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

.holiday-type.SelfCatering
Run Code Online (Sandbox Code Playgroud)

然后风格没有被提起.

有人说谎.

Bol*_*ock 233

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

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

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

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

所以,给定一个HTML元素有一个Selfcatering类,但没有一个SelfCatering阶层,选择.Selfcatering[class~="Selfcatering"]匹配它,而选择 .SelfCatering[class~="SelfCatering"]不会.2

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


1 在所有浏览器的怪癖模式下,类和ID不区分大小写.这意味着大小写不匹配的选择器将始终匹配.出于遗留原因,此行为在所有浏览器中都是一致的,并在本文中提及.

2 对于它的价值,选择器级别4包含一个建议的语法,用于使用[class~="Selfcatering" i]或强制对属性值进行不区分大小写的搜索[class~="SelfCatering" i].两个选择器都将HTML或XHTML元素与Selfcatering类或SelfCatering类(或者当然两者)匹配.然而,类或ID选择器没有这样的语法(但是?),可能是因为它们从常规属性选择器(没有与它们相关联的语义)中携带不同的语义,或者因为很难提出可用的语法.

  • 冷冻豆豆的@Roddy:那是因为HTML类和ID区分大小写,而标签名不是.出于这个原因,我特意将标签名称留给了我的答案.(顺便说一句,标签名称在真正的XHTML中仅区分大小写,无论doctype如何 - 如果jsFiddle可以让您强制将页面作为application/xhtml + xml提供,则`DIV`选择器将不再匹配.) (20认同)
  • 哇,这与我的[jsfiddle测试](http://jsfiddle.net/HR24X/)所表明的完全相反.`div`和`DIV`选择器都匹配`<div>`,但id和类名选择器必须完全区分大小写.除非我误解了你的答案? (7认同)
  • @Geek:"文档语言"是指您应用CSS的语言,最常见的是HTML,XHTML或XML.您可以在[此处]找到定义(http://www.w3.org/TR/CSS21/conform.html). (4认同)
  • 其他人是不是彻底糊涂了?如果选择器对大小写 **in** 敏感,那么根据定义,这不会使 CSS 类(*相对于选择它们的选择器*)也区分大小写 **in** 吗?换句话说,*相对于彼此*(CSS 类和选择器) - 如果一个不区分大小写,那么这意味着它们都是。换句话说 - 如果我的选择器是 `.selfchairs` 并且选择器不区分大小写,为什么它应该关心类是 `Selfkeeping` 还是 `SelfCatering` 或 `sElfcAtErInG`?我错过了什么? (3认同)
  • @BoltClock"文档语言"在这里是什么意思? (2认同)

Jac*_*one 59

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

实际的css本身不区分大小写.

例如

wiDth:100%;
Run Code Online (Sandbox Code Playgroud)

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

希望有所帮助.


Moh*_*deh 16

在quirks模式下,所有浏览器在使用和时都表现得像不区分大小写.CSS classid names

在quirks模式下,CSS类和id名称不区分大小写.在标准模式下,它们区分大小写.(这也适用于getElementsByClassName.)阅读更多...

有时当你有像贝娄这样的错误文档时,你的浏览器会进入怪癖模式.

<!DOCTYPE html PUBLIC>
<!DOCTYPE html anytext>
Run Code Online (Sandbox Code Playgroud)

你应该使用标准的doctype

HTML 5

<!DOCTYPE html> 
Run Code Online (Sandbox Code Playgroud)

HTML 4.01严格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
Run Code Online (Sandbox Code Playgroud)

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
Run Code Online (Sandbox Code Playgroud)

HTML 4.01框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
Run Code Online (Sandbox Code Playgroud)

XHTML 1.0严格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
Run Code Online (Sandbox Code Playgroud)

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Run Code Online (Sandbox Code Playgroud)

XHTML 1.0框架集

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 
Run Code Online (Sandbox Code Playgroud)

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
Run Code Online (Sandbox Code Playgroud)

如果您CSS class或您的id names行为case insensitive请检查您的doctype.


小智 5

CSS 不区分大小写。

但在 HTML5 中,类和 ID 区分大小写

所以,CSS 属性、值、伪类名、伪元素名、元素名不区分大小写

并且 CSS 类、 id 、 urls 、 font-families 是区分大小写的。

注意:在 html quirks 模式下,即使对于 ID 和类,css 也不区分大小写(如果删除 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>
Run Code Online (Sandbox Code Playgroud)