Порядок перезаписи стиля 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 внутри таблицы, которая находится внутри таблицы с классом infobox.

table.ATJMainTable tr td

выполняет стилизацию ячеек td внутри таблицы, классифицированной как ATJMainTable

Вы можете использовать! Важный, чтобы переопределить специфичность, или вы можете сделать что-то вроде:

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

это более конкретный селектор.

См. здесь .