Блог

Главная - Вопросы по программированию - Отображение носителя минимальной ширины перезаписывается стилем класса

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

#html #css

#HTML #css

Вопрос:

Я пытаюсь показать, <span> когда @media (min-width: 600px) и в других случаях скрыть это <span>

Итак, я создал класс с именем elimina-text , для которого установлено значение display none , затем в медиа-запросе я настраиваю этот класс на отображение inline , но медиа-запрос перезаписывается, и текст не отображается…

Итак, мой якорь, в котором я должен скрыть текст, выглядит следующим образом

 @media screen and (min-width: 600px) {
  .elimina-text {
    display: inline;
  }
}

.elimina-text {
  display: none;
}  
 <a _ngcontent-qmm-c108="" href="" apphref="" class="text-muted button-remove" ng-reflect-href=""><i _ngcontent-qmm-c108="" class="material-icons">delete</i><span _ngcontent-qmm-c108="" class="elimina-text">Elimina</span></a>

Ответ №1:

Измените порядок CSS.

 .elimina-text {
  display: none;
}

@media screen and (min-width: 600px) {
  .elimina-text {
    display: inline;
  }
}  
 <a _ngcontent-qmm-c108="" href="" apphref="" class="text-muted button-remove" ng-reflect-href=""><i _ngcontent-qmm-c108="" class="material-icons">delete</i><span _ngcontent-qmm-c108="" class="elimina-text">Elimina</span></a>

Комментарии:

1. Я дал ответ, используя! Важно, и я даже подумать не мог, что таков порядок построения правил :))

2. @sergeykuznetsov да, я видел, хорошая попытка: P Люди склонны использовать !important , но это очень плохая привычка.

3. да, я согласен, что использовать an — плохая практика !important . Но иногда вы не можете обойтись без !important :))

4. Я не мог представить, что порядок в css имеет значение, спасибо