css - 计算多个选择器在一条规则上的特异性

Question

以下 CSS 代码:

<style type="text/css">
    #box1 div.spec2 p,
    #box1 #box2 p {
        color: blue;
    }

    #box1 #box3 p {
        color: green;
    }
</style>

两条规则都针对元素 <p>其中的文字有 green颜色。

我觉得应该是blue因为有 3 个 ids , 1 class和 2 tags在第一条规则中，只有 2 个 ids在第二条规则中。但是网站计算的特异性https://specificity.keegan.st/表明:

• 第一条规则具有特异性(0,1,1,2)
• 第二条规则具有特异性(0,2,0,1)

我的问题是如何specificity是为多个选择器计算的(第一条规则)？为什么它只有 1 id ？

Answer 1

我怀疑您的困惑来自以下假设:当您对多个选择器进行分组时，您可以操纵逗号分隔列表中包含的选择器的特异性。这是不正确的:逗号分隔的选择器列表只是声明应用于所有选择器的相同样式的简写。

换句话说:

#box1 div.spec2 p,  /* Specificity: 0, 1, 1, 2 */
#box1 #box2 p {     /* Specificity: 0, 2, 0, 1 */
    color: blue;
}

#box1 #box3 p {     /* Specificity: 0, 2, 0, 1 */
    color: green;
}

...实际上等同于:

#box1 div.spec2 p { /* Specificity: 0, 1, 1, 2 */
    color: blue;
}

#box1 #box2 p {     /* Specificity: 0, 2, 0, 1 */
    color: blue;
}

#box1 #box3 p {     /* Specificity: 0, 2, 0, 1 */
    color: green;
}