Селектор элементов CSS переопределяющий класс css

Question

Кто-нибудь может объяснить, почему мой сброс CSS переопределяет мой более указанный класс CSS?

<div class="plan-price heading--xl">
  <span data-annual="127" data-montly="159">
    <sup>$</sup>
    <span>127</span>
    <span class="plan-month_marker heading--body_title"> /mo</span>
  </span>
</div>

Answer 1

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

Вам необходимо обновить стили для элемента span, если вы хотите, чтобы он имел стиль, отличный от стиля по умолчанию.

span {
  font-size: 20px;
}

.heading--xl {
  font-size: 12px;
}

<div class="plan-price heading--xl">
  <span data-annual="127" data-montly="159">
    <sup>$</sup>
    <span>127</span>
  <span class="plan-month_marker heading--body_title"> /mo</span>
  </span>
</div>