时间戳

首页 > 解决方案 > 媒体最小宽度显示被类样式覆盖

html - 媒体最小宽度显示被类样式覆盖

问题描述

我试图展示一个<span>何时@media (min-width: 600px)以及在其他情况下隐藏它<span>

所以我创建了一个名为elimina-textdisplay的类，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>

标签： htmlcss

解决方案

更改 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>

推荐阅读