Chrome时尚的CSS元素否定(普通图标)

Question

我使用Chrome的时尚扩展和一个自定义的CSS强制一个，所有网页上的大字体为所有元素，因为字体在许多网页上太艺术了，我的视力。

* {
    font-family: "Arial" !important;
    font-weight: bold !important;
    font-size: 22px !important; 
}

当我这样做时，在一些页面上，我现在看到方块取代了一些常用的图标，如下所示：

​

​

显然，强迫一个自定义字体会把他们搞砸。我想使用CSS否定从我的CSS覆盖中排除这样的图标元素，这样我就可以正确地看到它们。下面是一个显示这样一个图标的示例HTML块。“：：在”之前“部分似乎是图标。

<a href="javascript:;" class="social-icon comments event-tracking" data-action="social_article_bottom" data-label="comments" data-article="2617165" tabindex="1000">
<span class="fa fa-comments">
::before
</span>
<h1>Comments</h1></a>

但是，我无法正确地理解否定语法。将我的自定义CSS中的"*“替换为下面的内容会给我一个CSS错误。有人知道正确的语法吗？

 :not(fa fa-comments)

Answer 1

我觉得你想做这样的事：

body *:not(.fa-comments) {
 font-family: "Arial" !important;
 font-weight: bold !important;
 font-size: 22px !important;  
}

看一下这个链接，了解更多关于:not操作符的信息：

https://developer.mozilla.org/en/docs/Web/CSS/:not