Question

我希望我的整个表格具有“中心”文本对齐，除了一些特定的单元格具有“正确”的文本对齐。在我的代码中，一个单元格更具体地被CSS定位，但更普遍的赋值是重写。为什么这样，我该如何解决？

.data td {
    text-align: center;
}
.animal {
    text-align: right;
}

<table class="data">
    <tr>
        <th>Type of Animal</th>
        <th>Favorite Food</th>
    </tr>
    <tr>
        <td class="animal">Cat</td>
        <td>Mouse</td>
    </tr>
</table>

Answer 1

CSS选择器从最少到最具体的解释，因此增加CSS选择器的特异性以使其工作。

我建议不要使用!important，因为它会使CSS在将来更难添加/覆盖。

还有一个helpful MDN article on CSS specificity，它可以帮助您理解为什么您的CSS没有像您期望的那样覆盖其他规则。

.data td {
    text-align: center;
}
.data td.animal {
    text-align: right;
}

<table class="data">
    <tr>
        <th>Type of Animal</th>
        <th>Favorite Food</th>
    </tr>
    <tr>
        <td class="animal">Cat</td>
        <td>Mouse</td>
    </tr>
</table>

Answer 2

.data td将覆盖.animal，因为它有更多的控制使类似的

.data td {
    text-align: center;
}
.data .animal {
    text-align: right ;
}

<table class="data">
    <tr>
        <th>Type of Animal</th>
        <th>Favorite Food</th>
    </tr>
    <tr>
        <td class="animal">Cat</td>
        <td>Mouse</td>
    </tr>
</table>

CSS表的文本对齐覆盖特定单元格的文本对齐？

2 个答案: