Почему моя таблица стилей игнорируется таблицей стилей с более низкой специфичностью?

Question

Я создал spacing-элемент, который использует два класса:

.spacer-mobile-M = spacing height on mobile devices
.spacer-desktop-0 = spacing height on desktop devices (only active @media (min-width: 992px))

.spacer-blank {
    display: block;
    border: 1px solid #000;
}

.spacer-mobile-M {
    height: 20px;
}

@media (min-width: 992px) {
    .spacer-desktop-0 {
        height: 0px;
    }
}

<div class="spacer-blank spacer-mobile-M spacer-desktop-0" aria-hidden="true"></div>

Ожидаемое поведение на экране шириной 1200px может заключаться в том, что mobile-spacer перезаписывается стилем рабочего стола (более высокая специфичность из-за медиазапроса и определяется позже в коде).

Однако сейчас проставка на рабочем столе заменяется мобильным стилем.

Я испытываю такое поведение только с проставкой, высота которой меньше значения для мобильного телефона.

Существует ли правило, что классы с height: 0 или меньшей высотой, чем общий (без медиазапроса), могут быть перезаписаны? Я не могу найти что-либо в Google, когда я ищу специфичность.

Спасибо за короткий совет.

Answer 1

Я думаю, что проблема может заключаться в использовании двух разных классов CSS для одного и того же элемента.Если вы используете медиа-запросы, почему бы не использовать тот же класс?Например:

.spacer {
  display: block;
  height: 20px;
}

@media (min-width: 992px) {

  .spacer {
    height: 0;
  }
}

<div class="spacer" aria-hidden="true"></div>

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

@media (min-width: 992px) {

  .spacer {
    display: none;
  }
}