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

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>

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

因此，我向所有这些span元素添加了（以这种查询大小）类“ portfolio-arrow-button”，并为它们声明了显示方式：none;

这没用。

知道当涉及到对字体真棒图标进行样式替代时，有时需要使用：before伪选择器，我尝试了：

“ .portfolio-arrow-button：之前”，但无济于事。

最终隐藏按钮的方法是：在其父span元素内定位每个“ i”元素，并使用：before伪选择器，然后使用“ display：none;”。宣言。

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

尽管我很高兴这自己隐藏了“按钮”，但我真的很希望span元素也可以完全从页面中删除。

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

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

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

Answer 1

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

的CSS

#Portfolio > span {display:none;}