css - CSS 特异性如何决定应用哪些样式？

Question

CSS 如何确定何时将一种样式应用于另一种样式？

我已经通过了W3 CSS3 selectors document几次，这帮助我理解了如何在 jQuery 中更好地使用 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 关联的样式不优先于 Link 2？

显然，我可以这样绕过它:

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

但是，我觉得这是一个 hack，由于我缺乏理解，我不得不加入。

Answer 1

它基于ID、类和标签。 ID 具有最高的特异性，其次是 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