html - 从 CSS 中的所有选择器中排除一个类

Question

首先抱歉我的英语不好。我想从 CSS 的所有选择器中排除一个类。

我需要使用类似的东西

(h1, h2, h3, h4, ..., p, span, a, ...):not(.exclude){
   font-family: arial;
}

代替:

h1:not(.exclude), h2:not(.exclude), ..., a:not(.exclude){
   font-family: arial;
}

Answer 1

使用 CSS4 是可能的 :is选择器。您可以在此处注意浏览器支持:https://caniuse.com/?search=is但用现代网络开发人员的术语来说，您可以安全地使用它。

:is(h1,h2,h3):not(.exclude) {
  background: #bada55;
  color: #565656;
  padding: 10px;
}

<h1 class="exclude">
  Excluded
</h1>
<h2 class="include">
  Included
</h2>
<h3 class="exclude">
  Excluded
</h3>

上面的代码是这样的

h1:not(.exclude), h2:not(.exclude), h3:not(.exclude) { Properties... }

您还可以使用 :where做同样的事情:

:where(h1,h2,h3):not(.exclude) {
  background: #bada55;
  color: #565656;
  padding: 10px;
}

<h1 class="exclude">
  Excluded
</h1>
<h2 class="include">
  Included
</h2>
<h3 class="exclude">
  Excluded
</h3>