Конфликтующие! Важные объявления в CSS

Question

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

Я не уверен, почему не было возможности использовать только один, чтобы сделать оба, но, видимо, это несколько распространенная практика. Возможно, это связано с тем, что этот скрытый раздел отображается в виде узкого широкого столбца (с помощью Bootstrap 4) в правой части экрана, тогда как в мобильной версии он отображается над содержимым в широком столбце. Но я отвлекся ... Возможно, кто-то мог бы прокомментировать этот бит.

Фактический вопрос заключается в следующем.

Предположим, у нас есть класс

@media (min-width: 768px)
.d-md-none {
    display: none!important;
}

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

.d-md-none {
  display: block important!;
}

Однако я не вижу его на экране. Что такое разумный курс действий здесь?

Answer 1

Добавьте ваши стили печати в конце вашего существующего CSS в правило, например, так:

@media print {
  ...
}

Также, как упоминалось другими комментаторами, в вашей декларации !important есть опечатка (восклицательный знак идет перед словом важное).