Select class 内的所有 class 但不是特定的 class

Question

我需要为所有元素使用特定字体，但最外层父元素中的 class 除外。目前我的代码如下所示：

.foo *:not(.bar) {
  font-family: sans-serif;
}

<span class="foo">
  <a href="https://example.com"><span class="bar">Lorem</span></a>
  <a href="https://example.org"><span class="baz">ipsum</span></a>
  <span class="baz"> dolor</span>
  <span class="boo"> sit amet.</span>
</span>

现在，我希望 Lorem 保持原样，同时将字体应用于其他所有内容。我该怎么做？

Answer 1

添加 general sibling combinator ~ 就可以了。

.foo :not(.bar) ~ * {
  font-family: sans-serif;
}

<span class="foo">
  <a href="https://example.com"><span class="bar">Lorem</span></a>
  <a href="https://example.org"><span class="baz">ipsum</span></a>
  <span class="baz"> dolor</span>
  <span class="boo"> sit amet.</span>
</span>

但是因为 :not 在旧版浏览器中不受支持，我推荐以下方法（如@m4n0 所述），除非您不需要支持这些。

.foo * {
  font-family: sans-serif;
}
.foo .bar {
  font-family: initial;
}

<span class="foo">
  <a href="https://example.com"><span class="bar">Lorem</span></a>
  <a href="https://example.org"><span class="baz">ipsum</span></a>
  <span class="baz"> dolor</span>
  <span class="boo"> sit amet.</span>
</span>

Select class 内的所有 class 但不是特定的 class

Select all class inside a class but not a specific class

html

css

css-selectors