CSS：如何覆盖属性？

Question

我为表格定义了以下样式

table tbody.center tr td {
    text-align: center;
}

其目的是让 tbody 类等于 'center' 的表格单元格的内容居中对齐。

一些单元格仍然需要左对齐，所以我想要一个额外的样式

table tbody tr td.left {
    text-align: left;
}

但这并不完全符合我的需要：

<table>
    <tbody class="center">
        <tr>
            <td class="left">Should be left aligned, but is not</td>
            <td>Center aligned</td>
        </tr>
        <tr>
            <td>long text to stretch the table to be big enough to see the alignment</td>
            <td>long text to stretch the table to be big enough to see the alignment</td>
        </tr>
    </tbody>
</table>

在此标记中，“td”对象对齐实际上具有由“table tbody.center tr td”定义的样式。

为了解决这个问题我需要引入一个额外的样式：

table tbody.center tr td.left 
{
    text-align: left;
}

但我不想为我的每个自定义引入“左”。

有什么方法可以更有效地解决问题并指定样式的优先级？

谢谢。

Answer 1

您只需在属性声明的末尾，分号之前添加!important。

这是因为 CSS 级联，优先级分配给您的选择器。 在您的情况下，第一个选择器比第二个更具体，因此它具有更高的优先级并覆盖它。

在您的情况下，两个选择器具有相同的特异性（0,0,1,4），因此后者获胜。如 cmets 中所述，您可以将后一个规则移到第一个之前（并且可能添加注释以记住为什么该规则必须在另一个之前，以免再次出现问题）。

所有声明为important 的属性都比普通 属性具有更高的优先级。更多详情请看规格：http://www.w3.org/TR/CSS21/cascade.html#cascade

Answer 2

如果您能提供帮助，请不要使用!important。你最终会让以后更难以覆盖该样式。

有许多资源可用于 css 优先级，但这里有一个快速复习：

Universal selectors
Type selectors
Class selectors
Attributes selectors
Pseudo-classes
ID selectors
Inline style

更具体的选择器将应用于不太具体的选择器。并且尽量不要因为链接它们而发疯，否则会损害浏览器布局页面的性能。

更新 不确定整个解决方案的具体细节，但您可以通过将 id 添加到表格并将 .left 添加到 td 来有效地覆盖单元格。

table tbody.center tr td {
    text-align: center;
}

#some_id td.left {
    text-align: left;
}


<table id="some_id">
    <tbody class="center">
        <tr>
            <td class="left">Should be left aligned, but is not</td>
            <td>Center aligned</td>
        </tr>
        <tr>
            <td>long text to stretch the table to be big enough to see the alignment</td>
            <td>long text to stretch the table to be big enough to see the alignment</td>
        </tr>
    </tbody>
</table>

祝你好运！