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'对象中，alignement实际上是由'table tbody.center tr td'定义的样式。

为了解决这个问题，我需要引入一个额外的风格：

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

但我不想为我的每个定制都引入'left'。

有没有办法更有效地解决问题并指定样式的优先级？

谢谢。

Answer 1

如果可以提供帮助，请不要使用!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>

祝你好运！

Answer 2

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

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

在你的情况下，两个选择器具有相同的特异性（0,0,1,4），因此后者获胜。如评论中所述，您可以在第一个规则之前移动后一个规则（并且可以添加注释以记住自己为什么规则必须先于另一个规则，以便不再重新解决问题）。

声明重要的所有属性都具有比普通更高的优先级。有关详细信息，请查看规范：http://www.w3.org/TR/CSS21/cascade.html#cascade

CSS：如何覆盖属性？

2 个答案: