两个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 Example。

Answer 1

.table td选择器的specificity更高。 CSS特殊性规则有点奇怪...... ID比类名更重，比标记名更重。

特殊规则，简而言之：

• 对于每个标记名称，添加1。
• 对于每个班级名称，请添加10。
• 对于每个ID，请添加100。

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

Answer 2

我强烈建议您阅读实际的CSS specification on specificty。

有四个级别：

1. 内联样式，!important _（a）
2. ID _（b）
3. 类，伪类，属性选择器_（c）
4. 元素，伪元素_（d）

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

#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

Answer 3

<{1}} text-align的样式将胜过.table td所适用的text-align

.table td特异性是（1-1）：

（10 x 1类选择器）+（1 x 1元素选择器）

。细胞特异性为（1-0）：

（10 x 1级选择器）

要使cell获胜，它必须具有比其他人更高的特异性。它也可以与其他人相同，但必须在相同级别的其他人之后声明。

read more about inheritance and specificity

Answer 4

如果你这样做

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

它会正确对齐http://jsfiddle.net/VTrEE/4/