css样式覆盖顺序？

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;
}

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

警告:你会想要谨慎使用它,因为如果你使用太多就很难追查它会引起问题.