介质最小宽度显示被类样式覆盖

Question

我试图在@media (min-width: 600px)时显示<span>，在其他情况下隐藏<span>

所以我创建了一个名为elimina-text的类，其显示设置为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>

Answer 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>