CSS 元素否定 Chrome 时尚（常用图标）

Question

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

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

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

显然强制使用自定义字体会把它们弄乱。我想使用 CSS 否定从我的 CSS 覆盖中排除这些图标元素，以便我可以正确地看到它们。下面是显示此类图标的示例 HTML 块。 "::before" 部分似乎是图标。

<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;  
}

查看此 link 以了解有关 :not 运算符的更多信息：

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

CSS 元素否定 Chrome 时尚（常用图标）

CSS element negation for Chrome Stylish (common icons)

html

css

google-chrome

negation