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

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

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

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

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

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

3 53
html css

3 ответа:

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

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

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

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

70

специфичность рассчитывается на основе количества селекторов id, class и tag в вашем правиле. Id имеет самую высокую специфичность, затем класс, затем тег. Ваше первое правило теперь более специфично, чем второе, так как у них обоих есть селектор классов, но у Первого также есть два селектора тегов.

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

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

здесь хорошая статья для получения дополнительной информации о приоритете селектора.

15

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

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

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

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