Приоритет CSS: почему встроенные стили переопределяются

В CSS стили применяются к элементам в зависимости от приоритета их правил. Когда несколько правил нацелены на один и тот же элемент, вступает в силу правило с наивысшим приоритетом.

В приведенном примере у вас есть встроенный стиль, который устанавливает отступ-left: 10px для элементов td в таблице с правым столбцом. ИДЕНТИФИКАТОР. Однако стиль из указанной таблицы стилей устанавливает поля и отступы равными 0 для всех элементов в классе .rightColumn. Проблема в том, что стили из указанной таблицы стилей имеют более высокий приоритет, что приводит к переопределению встроенных стилей.

Вычисление специфичности

Приоритет CSS определяется спецификой правила. Специфичность рассчитывается на основе следующих критериев:

1. Объявления встроенного стиля приносят 1 балл к специфичности (a = 1).
2. Каждый идентификатор в селекторе приносит 10 баллов (b = n ).
3. Каждый класс или псевдокласс в селекторе приносит 1 балл (c = n).
4. Каждый элемент или псевдоэлемент в селекторе приносит 1 балл (d = n).

Например, правило с селектором .rightColumn * имеет специфичность 0010 (a = 0, b = 0, c = 1, d = 0), а правило с селектором td имеет специфичность 0001 (a = 0, b = 0, c = 0, d = 1). Поскольку 0010 больше, чем 0001, правило из указанной таблицы стилей имеет более высокий приоритет.

Решение проблемы

Чтобы решить эту проблему и применить встроенные стили, у вас есть два варианта:

1. Используйте !important: Вы можете добавить !important к встроенному стилю, чтобы повысить его важность. Однако этот подход может быть трудным в обслуживании, и его следует избегать, если это возможно.
2. Повысьте специфичность правила: Вы можете добавить более конкретный селектор к встроенному стилю, чтобы повысить его специфичность. Например, вы можете добавить имя класса в ячейки таблицы и стилизовать их с помощью селектора, например .rightColumn .myUnpaddedTable. Таким образом, специфичность встроенного стиля становится 0011, что выше, чем специфичность правила из указанной таблицы стилей (0010).