Question

CSS如何确定何时应用一种样式而不是另一种样式？

我已经完成了W3 CSS3 selectors document几次，这帮助我理解了如何在jQuery中更好地使用CSS选择器，但它并没有真正帮助我理解何时将一个CSS规则应用于另一个CSS规则。

我有以下HTML：

<div class='item'>
    <a>Link 1</a>
    <a class='special'>Link 2</a>
</div>

我有以下CSS：

.item a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 1em;
}

.special {
    text-decoration: underline;
    color: red;
    font-weight: normal;
    font-size: 2em;
}

鉴于上述情况，链接1和链接2的样式将相同，由.item a CSS确定。为什么与.special关联的样式不优先于链接2？

显然，我可以像这样绕过它：

.special {
    text-decoration: underline !important;
    color: red !important;
    font-weight: normal !important;
    font-size: 1em !important;
}

但是，我觉得这是一个由于我缺乏理解而必须加入的黑客。

Answer 1

它基于IDs，classes和tags。 IDs具有最高的特异性，然后classes然后tags，所以：

.item a     == 0 1 1      0 (id) 1 (class=item) 1 (tag=a)
.special    == 0 1 0
#foo        == 1 0 0
#foo .bar a == 1 1 1
#foo #bar   == 2 0 0

哪一个获胜最多:)如果它是一个平局，无论哪一个在文档中最后获胜。请注意1 0 0击败0 1000 1000

如果您希望.special申请，请更具体：.item a.special

Answer 2

我建议您熟悉this以供将来参考。对于这种特殊情况，请注意级联顺序下的第3点：

计算选择器中ID属性的数量。

计算选择器中CLASS属性的数量。

计算选择器中HTML标记名称的数量。

如果这些内容适用于您的代码，则.item a具有1个类属性+ 1个HTML标记名称，而.special只有一个类属性。因此，前者赢得了设置特殊链接的权利。

Answer 3

http://www.w3.org/TR/CSS21/cascade.html#specificity是官方特异性规范。

但是，如果那是TL; DR，（太）短版本是你的选择器中的单词越多，特异性就越高。并且！重要甚至更高。就是这样。

编辑：哦，我看到您的链接与我的信息相同。对不起。

CSS特性如何决定应用哪种样式？

3 个答案: