html - 计算选择器的特异性(CSS)

标签 html css css-selectors css-specificity

我知道要计算选择器的特异性,我们使用三个数字,其中左边的第一个数字是 ID 的数量,第二个数字代表类、伪类和属性的数量,第三个数字代表元素的数量。

我意识到以下数字被夸大了……ID 比类更具体,类比元素更具体,但是特异性为 1.0.0 的选择器(因此具有一个 ID 的选择器)是否会胜过特异性为 0.222 的选择器.0(具有 222 个类/伪类的选择器)?

最佳答案

是的。

测试:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<style type="text/css">
#ID {color:red}
.C1.C2.C3 ... .C220.C221.C222 {color:green}
</style>
</head>
<body>
<div id="ID" class="C1 C2 C3 ... C220 C221 C222">This is a test.</div>
</body>
</html>

在最近的 Firefox、Chrome、IE 和 Opera 浏览器中,文本为红色。

关于html - 计算选择器的特异性(CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1942229/

相关文章:

jQuery 选择器 :first in class, 但 id :not 开头

css - 如何覆盖 div?

javascript - 使用 CSS3 进行条件样式设置?

css - 通过调整边距用多个子div填充父div

css - 将一个 div 居中放置在一个 div 中

javascript - 带有 JS 的 jQuery 移动 slider

html - 单元格左对齐且右侧有额外空间的表格

javascript - 是否可以制作一个可水平和垂直滚动的网站?

javascript - 问题获取菜单滑动

jQuery 选择器