显示后跨度元素仍然可见：无；答案

【问题标题】：Span elements still visible after display:none;显示后跨度元素仍然可见：无；
【发布时间】：2016-12-17 11:53:28
【问题描述】：

我有四个 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 元素（当然还有它们的子元素）。

所以，我在所有这些 span 元素中添加了（在这个查询大小下）类“portfolio-arrow-button”，并给它们一个声明 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 的最后一个 css 是 display:inline-block;写显示：无；之后
“显示：无；”声明是我的 CSS 样式文件中的最后一个声明，但出于某种原因，Font Awesome 图标往往会覆盖任何个人样式。 “显示：内联；”声明是由 Font Awesome 自动添加的，而不是在我的样式表中。这就是为什么我提到我在定位我的 CSS 中的元素时尝试使用 ":before" 伪选择器（因为它通常可以覆盖 Font Awesome 自动样式）但它不起作用。
main.css 在 font-awesome.css 之前？
您的开发工具屏幕截图表明您在 main.css 之后嵌入了 fontawesome CSS 文件，这就是为什么您的规则具有相同的特异性（如果这并不意味着任何给你的，查一下）被后一个覆盖。要么更改这些样式表的嵌入顺序，要么使用具有更高特异性的选择器。
哦！谢谢！没注意到！

标签： html css visibility font-awesome display

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

CSS

#Portfolio > span {display:none;}

【讨论】：

【解决方案3】：

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

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

【讨论】：