Question

我有四个span元素作为Font Awesome（图标字体服务）堆栈，这意味着它们每个都包含两个字体 - 真棒＆＃34; i＆＃34;元素。

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

所以，我添加了（在此查询大小）类＆＃34; portfolio-arrow-button＆＃34;所有这些span元素，并给他们一个display：none;

这没有用。

知道在设置样式覆盖Font Awesome图标时，有时需要使用：before伪选择器，我试过：

＆＃34; .portfolio-arrow-button：在＆＃34;之前，但无济于事。

最终隐藏按钮的原因是：定位每个＆＃34; i＆＃34; element，在其父span元素中，并使用：before伪选择器，然后使用＆＃34; display：none;＆＃34;宣言。

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

虽然我很高兴这隐藏了＆＃34;按钮＆＃34;他们自己，我真的希望span元素完全从页面上消失。

不是它们不可见，但是在使用调试器进行检查时，它们仍然存在（跨度容器，而不是它们的子容器）。

任何人都有关于如何摆脱它们或为什么会这样的想法？

非常感谢帮助，谢谢！

Answer 1

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

CSS

#Portfolio > span {display:none;}

Answer 2

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

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

您也可以在!important之后添加display:none指令。然而，要避免它是有臭味和更好的。

Answer 3

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

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

显示后，span元素仍然可见：none;

3 个答案:

CSS