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

Question

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

我已经通过W3 CSS3选择器文档了几次,这帮助我理解了如何在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 aCSS 确定.为什么与.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