display:none;后span元素仍可见。

Question

我有四个span元素，它们作为Font Awesome（图标字体服务）堆栈，这意味着每个元素都包含两个font-awesome的“i”元素。

       <span class="fa-stack fa-2x left-arrow-button portfolio-arrow-button">
            <i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
            <i class="fa fa-chevron-circle-left fa-stack-2x left-arrow-img" aria-hidden="true"></i>
        </span>
        <span class="fa-stack fa-2x right-arrow-button portfolio-arrow-button">
            <i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
            <i class="fa fa-chevron-circle-right fa-stack-2x right-arrow-img" aria-hidden="true"></i>
        </span>
        <span class="fa-stack fa-2x left-arrow-button-2 portfolio-arrow-button">
            <i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
            <i class="fa fa-chevron-circle-left fa-stack-2x left-arrow-img" aria-hidden="true"></i>
        </span>
        <span class="fa-stack fa-2x right-arrow-button-2 portfolio-arrow-button">
            <i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
            <i class="fa fa-chevron-circle-right fa-stack-2x right-arrow-img" aria-hidden="true"></i>
        </span>

我在min-width为1290px时创建了一个CSS媒体查询，并希望隐藏这些span元素（当然还有它们的子元素）。因此，在这个查询大小上，我将“portfolio-arrow-button”类添加到所有这些span元素中，并给它们一个display:none的声明。但是，这并没有起作用。知道对Font Awesome图标进行样式覆盖时有时需要使用:before伪选择器，我尝试了“.portfolio-arrow-button:before”，但是没有用。最终成功隐藏按钮的方法是：针对每个父span元素内部的“i”元素，使用:before伪选择器，然后使用"display:none;"声明。

.button-circle-background:before, .left-arrow-img:before, .right-arrow-img:before {
        display: none;
       } 

虽然我很高兴这样可以隐藏“按钮”本身，但是我真的希望span元素也从页面上消失。

虽然它们不可见，但在调试器中检查时，它们仍然存在（span容器，而不是它们的子元素）。

有人有任何想法如何摆脱它们或者为什么会出现这种情况吗？

非常感谢您的帮助，谢谢！

- Edson

---

main.css在font-awesome.css之前吗？ - Teymur Mardaliyer Lennon

你的开发工具截图显示，你是在主CSS文件之后嵌入了fontawesome CSS文件，这就是为什么你的规则被后面的覆盖了，尽管它们的特异性相同（如果你不知道这是什么意思，请查一下）。要么改变样式表的嵌入顺序，要么使用更高特异性的选择器。 - CBroe

哦！谢谢你！我没注意到那个！ - Edson

已经进行了更改，但是Font-Awesome样式仍然覆盖了我的CSS样式。 - Edson

好的，具体性起了作用，谢谢！我之前认为通过类名选择元素非常具体，但我想不是这样。krzychek的例子“#Portfolio > span {}”效果很好。 - Edson

Answer 1

krzychek在上面的答案中是正确的（main.css被font-awesome-css.min.css覆盖），但如果您无法更改文件顺序，则可以采用另一种方法：

CSS

#Portfolio > span {display:none;}

- asonnenshine

---

我知道这篇文章很老，但是您或者其他人能否详细说明一下为什么这个方法有效呢？这个会被FontAwesome覆盖：#closeNav { display: none; }而这个则不会：#mainNav > #closeNav { display: none; } - Slower is Faster

Answer 2

据我在开发工具中看到的，这个元素应用了两种样式，但选择了来自font-awesome-css.min.css的样式。 main.css放置在font-awesome-css.min.css之前吗？

我不是CSS大师，但我猜测main.css放在其他css之前，因此被后续规则覆盖。

此外，您可以在display:none之后添加!important指令。然而，这样做有点不好，最好避免。

- krzychek

Answer 3

将以下代码添加到您网页的头部：

<style>
   span.fa-stack { display:none !important; }
</style>

- asonnenshine