时间戳

首页 > 解决方案 > 如果我只针对它的类，CSS 显示 none 在 div 上不起作用

html - 如果我只针对它的类，CSS 显示 none 在 div 上不起作用

问题描述

我有两个div包含字体真棒引号。

    <div class="fas fa-quote-left fa-quote"></div>
    <div class="fas fa-quote-right fa-quote"></div>

div当屏幕小于 768px 时，我想隐藏这两个。

@media (max-width: 767.98px) {
    .fa-quote {
        display: none;
    }
}

以上没有奏效。
但是当我div在前面添加时.fa-quote，它起作用了！
像这样：

@media (max-width: 767.98px) {
    div .fa-quote {
        display: none;
    }
}

我想知道这里发生了什么。有什么区别？
提前致谢。

标签： htmlcss

解决方案

不同之处在于 css 的具体级别足以进行其他类声明和同一级别的最后声明。

因此，如果您的 css 代码继续进行 fontawesome 一个，并且一个说 display:none，而另一个说 display:block ，它将使用最后读取的值。

除非您的定义更具体。你的目标越具体，它的效果就越大。

您还可以使用 display:none!important 来确保您的定义获得更高的优先级。但是要小心这一点，因为它可能会导致难以跟踪/读取 css 代码。

推荐阅读