Отрицание элемента CSS для Chrome Stylish (обычные значки)

Question

Я использую расширение "Стильный" в Chrome и собственный 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;  
}

Взгляните на эту ссылку, чтобы узнать больше о :not оператор:

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