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>

我创建了一个最小宽度为 1290 像素的 CSS 媒体查询，并希望从该查询大小开始隐藏这些跨度元素（当然还有它们的子元素）。

所以，我向所有这些 span 元素添加了（以这个查询大小）class "portfolio-arrow-button" 并给了它们一个显示声明：none;

这没有用。

知道在对 Font Awesome 图标进行样式覆盖时，有时需要使用 :before 伪选择器，我尝试了：

".portfolio-arrow-button:before", 但无济于事。

最终隐藏按钮的方法是：针对每个 "i" 元素，在它们的父 span 元素中，使用 :before 伪选择器，然后使用 "display: none;" 声明。

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

尽管我很高兴这隐藏了 "buttons" 本身，我真的希望 span 元素也完全从页面中消失。

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

有人对如何摆脱它们或为什么会这样有任何想法吗？

不胜感激，谢谢！

Answer 1

正如我在开发工具中看到的那样，两种样式都应用于元素，但选择了 font-awesome-css.min.css 中的一种。 main.css是放在font-awesome-css.min.css之后吗？

我不是 CSS 大师，但我的猜测是 main.css 位于其他 css 之前，因此被以下规则覆盖：P

您也可以在 display:none 之后添加 !important 指令。但是它很臭，最好避免。

Answer 2

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

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

Answer 3

krzychek 在上面的答案中是正确的（main.css 被 font-awesome-css.min.css 覆盖）但是如果你不能改变文件的顺序，那么这里有另一种方法来做到这一点：

CSS

#Portfolio > span {display:none;}

display:none 后 Span 元素仍然可见；

Span elements still visible after display:none;

html

css

visibility

font-awesome

display

CSS