两个CSS类:哪一个胜出？

Question

下面的标记与SAMPLE TEXT左侧对齐.

对我而言,它似乎应该与右边对齐.与右对齐的类在左对齐的类之后声明.与右边对齐的类甚至最后引用.那么为什么与左翼对齐的班级获胜？

CSS

.table {
    width: 100%;
}
.table td {
    text-align: left;
}
.cell {
    text-align: right;
}

HTML

<table class="table">
    <tr>
        <td class="cell">
             SAMPLE TEXT
        </td>
    </tr>
</table>?

请参阅我的jsFiddle示例.

Answer 1

该.table td选择具有较高的特异性.CSS特异性规则有点奇怪... ID比类名更重,比标记名更重.

特殊规则,简而言之:

较高的值将始终覆盖较低的值.在平局的情况下,最后加载的规则获胜.

@GGG Bolt的意思是,如果你将标签加到10或更多,该值将不会延续到另一个数字.它继续像1-10,1-11,1-12(class-tag) (4认同)
@BoltClock如果不是10,那么值是什么基数？我不认为我理解你的意思.我读[this](http://www.w3.org/TR/selectors/#specificity)的方式,值是11.如果你有时间,你可以在一个单独的答案中解释这个吗？ (2认同)

Answer 2

我强烈建议您阅读具体的CSS规范.

有四个级别:

对于每个选择器,在其各自的字母类别中添加一个:

#foo.bar baz -> a=0, b=1, c=1, d=1
#fizz#buzz   -> a=0, b=2, c=0, d=0

a特朗普b胜过c王牌d.

如果有平局,第二个获胜:

#foo #bar baz
#fizz #buzz baz  <-- same specificity, this one wins