Elements и стили — Примеры

Пример 1 — Два правила и непонятно, какое побеждает

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

состояние панели (иллюстративное)
.card        { padding: 1rem; }                          ← применено
.card.small  { padding: .5rem; }                         ← зачёркнуто
computed     padding: 16px

Решение

прочтение
.card.small    два класса   -> выше специфичность, чем у одного класса
.card          один класс   -> проигрывает, несмотря на то что идёт раньше

чтобы проигравшее правило победило, либо уберите лишний класс-квалификатор,
либо перенесите его ниже с равной специфичностью — не добавляйте !important

Панель Styles перечисляет все применимые правила в порядке, в котором их разрешил каскад, с зачёркнутыми проигравшими и ссылкой на строку каждого правила в исходнике — собственный ответ браузера на вопрос, почему элемент выглядит так, который нельзя получить чтением файлов, потому что каскад зависит от всего документа и сборки. Здесь решила специфичность, и исправление — изменить селектор, а не эскалировать: !important выигрывает один спор и проигрывает в следующем.

Пример 2 — Элемент, который есть в дереве, но невидим

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

состояние панели (иллюстративное)
<div class="overlay" …>                     ← присутствует, накрывает кнопку
  <button class="cta">Continue</button>     ← присутствует в DOM
блочная модель: overlay  width 100%  height 100%  position: fixed  z-index: 3
стили:          .cta     opacity: 1, display: block, visibility: visible

Решение

прочтение
кнопка есть в DOM                      -> и разметка, и скрипт отработали
стили кнопки говорят «видима»          -> проблем display, opacity или visibility нет
overlay лежит поверх неё во всю высоту -> клик попадает в overlay, а не в кнопку

причина: полноразмерный fixed-overlay с большим z-index находится сверху.
проверьте цепочку родителей по блочной модели на каждом уровне, прежде чем править кнопку.

Дерево показывает DOM после выполнения скриптов, поэтому узел, найденный там, исключает пропущенную ветку рендеринга, а панель Styles исключает невидимый элемент — остаётся геометрия. Блочная модель показывает содержимое, padding, border и margin для выбранного элемента и его предков, а ошибки вёрстки обычно в отступах или режиме отображения родителя. Проверка размеров и стека по цепочке родителей превращает догадку в наблюдение.