两个CSS类:哪一个胜出？
两个CSS类:哪一个胜出？
提问于 2012-03-02 11:24:25
下面的标记将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。
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-03-02 11:27:20
.table td选择器具有更高的specificity。CSS专用性规则有点奇怪...ID比类名更重要，类名比标签名更重要。
简而言之，特异性规则：
- 对于每个标记名，添加1。
- 对于每个类名，添加10。
- 对于每个ID，添加100。
较高的值将始终覆盖较低的值。在平局的情况下，最后加载的规则获胜。
Stack Overflow用户
发布于 2012-03-02 11:26:38
.table td的text-align风格将赢得cell应用的text-align
.table td特异性为(1-1)：
(10 x 1类选择器)+ (1 x 1元素选择器)
.cell特异性为(1-0)：
(10 x 1类选择器)
要想让.cell获胜，它必须具有比其他产品更高的特异性。它也可以与其他值相等，但必须在同一级别的其他值之后声明。
Stack Overflow用户
发布于 2012-03-02 11:31:40
如果你这样做了
.table {
width: 100%;
}
.table td {
text-align: left;
color: Yellow;
background-color: Red;
}
td.cell {
text-align: right;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9527548
复制相关文章
相似问题