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，只有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;
}

计算一个规则上多个选择器的特异性

1 个答案: