Правила переопределения CSS и их специфичность

Меня часто путают правила переопределения CSS: в общем, я понимаю, что более конкретные таблицы стилей переопределяют менее конкретные, и эта специфика определяется количеством указателей. Также существует ключевое слово !important, которое также играет роль.

Итак, вот простой пример: у меня есть таблица с двумя ячейками таблицы. Сама таблица имеет правило CSS, которое применяется ко всем ячейкам в таблице. Однако вторая ячейка таблицы имеет собственное правило, которое должно переопределять правило общей таблицы:

<html>
<head>
<style type = "text/css">

table.rule1 tr td {
    background-color: #ff0000;
}

td.rule2 {
    background-color: #ffff00;
}

</style>

</head>
<body>
    <table class = "rule1">
        <tr>
            <td>abc</td>
        </tr>
        <tr>
            <td class = "rule2">abc</td>
        </tr>
    </table>
</body>
</html>

Но... когда я открываю это в браузере, я вижу, что rule2 не переопределяет rule1. Итак, я думаю, мне нужно сделать rule2 более "конкретным", но я не могу определить каких-либо дополнительных селекторов, так как просто хочу применить его к определенной ячейке таблицы. Итак, я попытался поместить ключевое слово ! important, но это тоже не работает.

Я могу переопределить rule2, если обернуть текст node в <div>, например:

        <td class = "rule2"><div>abc</div></td>

... и затем сделать правило CSS более конкретным:

td.rule2 div {
    background-color: #ffff00; !important
}

Это работает, но это не совсем то, что я хочу. Во-первых, я хочу применить правило к ячейке таблицы, а не к DIV. Это имеет значение, потому что вы все еще можете видеть цвет фона rule1 как границу вокруг div.

Итак, что мне нужно сделать, чтобы сообщить CSS, я хочу rule2 переопределить rule1 для элемента td?

Ответ 1

Чтобы дать второе правило более высокую специфичность, вы всегда можете использовать части первого правила. В этом случае я бы добавил table.rule1 tr из правила 1 и добавил его к правилу 2.

table.rule1 tr td {
    background-color: #ff0000;
}

table.rule1 tr td.rule2 {
    background-color: #ffff00;
}

Через некоторое время я нахожу это естественным, но я знаю, что некоторые люди не согласны. Для тех людей, я предлагаю заглянуть в LESS или SASS.

Ответ 2

Специфика вычисляется на основе количества идентификаторов, классов и тегов в вашем правиле. Идентификатор имеет самую высокую специфичность, затем класс, затем тег. Ваше первое правило теперь более конкретное, чем второе, поскольку оба они имеют селектор классов, но первый также имеет два селектора тэгов.

Чтобы второй заменил первый, вы можете сделать более конкретным, добавив в него информацию о родителях:

table.rule1 tr td.rule2 {
    background-color: #ffff00;
}

Здесь - хорошая статья для получения дополнительной информации о приоритете выбора.

Ответ 3

Важное значение должно быть внутри;

td.rule2 div {     background-color: #ffff00 !important; }

на самом деле я считаю, что это должно отменить его

td.rule2 { background-color: #ffff00 !important; }