css样式覆盖顺序？

Question

我有 2 个 css 包含

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

布局.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

专门覆盖那一 block 。

或者，您能否减少信息框选择器的具体性？