选择类中的所有类，但不选择特定类

发布于 2025-01-10 18:13:09 字数 647 浏览 0 评论 0原文

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

.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 保持原样，同时将字体应用于其他所有内容。我怎样才能做到这一点？

原文

I need to use a specific font for all elements but one class inside the most outer parent. Currently my code looks like this:

.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>

Now, I want Lorem to stay as is, while applying the font to everything else. How can I do that?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

記柔刀 2025-01-17 18:13:09

添加通用同级组合器 ~ 就可以了。

.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>

Adding the general sibling combinator ~ does the trick.

.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>

But because :not is not supported in older browsers, i would recommend the following method (as mentioned by @m4n0), unless you don't need to support those.

.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>

回复收藏 0 原文

~没有更多了~