计算选择器的特异性（CSS）答案

【问题标题】：Calculating the specificity of a selector(CSS)计算选择器的特异性（CSS）
【发布时间】：2010-12-28 20:56:16
【问题描述】：

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

我意识到下面的数字被夸大了……ID 比类更具体，类比元素更具体，但是特异性为 1.0.0 的选择器（因此只有一个 ID 的选择器）会胜过特异性为 0.222 的选择器.0（具有 222 个类/伪类的选择器）？

【问题讨论】：

是的，但是特异性为 1.0.0 的选择器将输为特异性为 0.256.0 的选择器。（在大多数浏览器中）。见stackoverflow.com/a/11934505/613004

标签： html css css-selectors css-specificity

【解决方案1】：

是的。

测试：

<!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 浏览器中为红色。

【讨论】：

我不知道“... C220.C221.C222 {color:green}”是指定选择器的有效方式。不管怎样，谢谢你的帮助