Question

我有2个css包括

<link href="Styles/layout.css" rel="stylesheet" type="text/css" />
<link href="Styles/ATJournal.css" rel="stylesheet" type="text/css" />

layout.css中

Table.infoBox tr td table tr td
{
    padding: 0px;
    border: 0px;
}

ATJournal.css

table.ATJMainTable tr td
{
    border: 1px solid black;
    padding: 3px;
}

然后我们有这个表

<Table class="infoBox">
    <tr>
        <td>
        <table class="ATJMainTable">
            <tr>
                <td>
                    some text!
                </td>
            </tr>
        </table>
    </tr>
</table>

为什么在这种情况下layout.css会覆盖ATJournal.css？

即使我改变了css的顺序，包括“layout.css”仍然会覆盖ATJournal.css ....

Answer 1

选择器更具体。

Table.infoBox tr td table tr td

在表格内部设置td单元格，该表格位于一个归入信息框的表格内。

table.ATJMainTable tr td

在使用ATJMainTable

分类的表格中设置td单元格样式

您可以使用！important来覆盖特异性，或者您可以执行以下操作：

table.infoBox tr td table.ATJMainTable tr td

专门覆盖那一块。

或者，您可以减少信息框选择器的特定性吗？

Answer 2

您可以使用!important实际指定哪个规则获胜。

table.ATJMainTable tr td
{
    border: 1px solid black !important;
    padding: 3px !important;
}

这基本上告诉浏览器，它应确保此规则是最重要的规则，并且所有其他规则应该级联以支持此规则。

警告：您会谨慎使用此功能，因为如果您使用太多而难以追踪，则会导致问题。

Answer 3

这是一个更具体的选择器。

请参阅here。

css样式覆盖顺序？

3 个答案: