这是我的意思的一个例子：
不知何故，1个ID将击败看似无限数量的类。这是如何计算的？
<style>
div {
height:200px;
width:200px;
}
#big .little {
/* Specificy value = 110 */
background-color:red;
}
#big .little.little {
/* Specificy value = 120 */
background-color:blue;
}
.little.little.little.little.little.little.little.little.little.little.little.little.little {
/* Specificy value = 130, why doesn't this win? */
background-color:green;
}
</style>
<div id="big">
<div class="little"></div>
</div>
答案 0 :(得分：11)
简单地说：ID总是会击败任何数量的类，伪类，属性选择器或类型选择器，但不一定是另一个ID。这就是你需要记住的一切。
或者进入技术细节：特殊性不计入我们都使用的一些十进制数字基数。 ID不值“100分”，类/属性/伪类不是“10分”，类型/伪元素不是“1分”等。你不要添加这些数字并比较它们，数学上，基于他们的总和;这不是它的工作原理。 （您确实将ID的个别数量，类/属性/伪类的数量等加起来，但是您不会将所有单个数字添加到一个总数中。）
这些简单选择器的特异性以相当不同的方式计算。 spec说得最好：
9。计算选择器的特异性
选择器的特异性计算如下：
- 计算选择器中的ID选择器数量（= a）
- 计算选择器中的类选择器，属性选择器和伪类的数量（= b）
- 计算选择器中的类型选择器和伪元素的数量（= c）
- 忽略通用选择器
negation pseudo-class内的选择器与其他选择器一样，但是否定本身并不算作伪类。
连接三个数字a-b-c（在具有大碱基的数字系统中）给出了特异性。
示例：
* /* a=0 b=0 c=0 -> specificity = 0 */ LI /* a=0 b=0 c=1 -> specificity = 1 */ UL LI /* a=0 b=0 c=2 -> specificity = 2 */ UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */ H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */ UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */ LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */ #x34y /* a=1 b=0 c=0 -> specificity = 100 */ #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
请注意，它表示“连接”（如连接字符串），而不是“添加”（如2 + 2 = 4的算术意义）。
另请注意，它表示“基数较大的数字系统”;这只是为了说明你没有把这些特殊性得分作为十进制数，其中13×10 = 130大于1×100 = 100的外行人。
这是计算选择器特异性的方法：
/* 1 ID, 1 class -> specificity = 1-1-0 */
#big .little
/* 1 ID, 2 classes -> specificity = 1-2-0 */
#big .little.little
/* 0 IDs, 13 classes -> specificity = 0-13-0 */
.little.little.little.little.little.little.little.little.little.little.little.little.little
现在注意第三个选择器的特异性 less 与前两个的相比如何，因为没有使用ID选择器？
当比较其他两个选择器时，每个选择器都有一个ID选择器，你会看到第二个选择器还有一个类。在这种情况下，第二个选择器由于额外的类选择器而获胜，即使每个选择器都有一个ID选择器，因为ID选择器本身具有相同的特异性。