将CSS规则应用于除其子元素之外的所有元素

Question

I have this CSS rule:

* {
  font-family: Tahoma;
}  

我希望将规则应用于除了这个唯一的类别为 div 及其子元素之外的所有元素：

<div class="angular-text-editor">
    <p></p>
    <p></p>
    <p></p>
</div>

我想要一些css规则来确保*规则适用于除此div和它的子元素之外的所有元素。

我甚至尝试使用:not选择器，但对于子元素没有帮助。

谢谢

- arash yousefi

---

如果你编写一个CSS规则来针对该div及其内容覆盖全局样式，那么代码会更加简洁和清晰。 - fubar

如果你指的是 !important，我也试过了，我想要字体族被取消，但是使用覆盖后它又从 * 获取了字体。 - arash yousefi

Answer 1

选择具有后代的唯一div并为它们分配不同的font-family

* {
  font-family: sans-serif;
}

.a, .a * {
  font-family: monospace;
}

<div class="a">
   first text
   <p>more text</p>
   <div>
      further nested text
      <p>more text</p>
   </div>
</div>
<div>
   second text
   <p>more text</p>
</div>

或者将font-family分配给body标签，并在唯一元素上使用unset，在其后代中使用inherit。

.a {
  font-family: unset;
}

.a * {
  font-family: inherit !important;
}

body *:not(.a) {
  font-family: sans-serif;
}

body {
  font-family: monospace;
}

<div class="a">
   first text
   <p>more text</p>
   <div>
      further nested text
      <p>more text</p>
   </div>
</div>
<div>
   second text
   <p>more text</p>
</div>

- Cray

---

谢谢，这很聪明。 但是我正在动态设置该类的字体，并且我需要将其取消设置。但是我发现星号（*）正在应用于它们。 您的代码对于已分配的字体可以正常工作，但是对于未设置的字体则无法正常工作。 - arash yousefi

添加了一个使用 unset 的替代方案，但最终结果基本相同。 - Cray

看起来你的问题可能不在于CSS，如果你看我的第二个例子，你可以在body或.a上设置font-family，它会覆盖*:not()选择器。 - Cray

谢谢，无论如何，它解决了一些问题，真的很有帮助。 - arash yousefi

可能有些混淆关于 unset 的作用。unset 将元素的继承属性（其中包括 font-family）设置为与其父元素相同 - 这似乎与您尝试做的相反。 - Swimmer F

Answer 2

我把CSS规则改成了这样：

body {
 font-family: Tahoma !important;
}

所以如果没有自己的字体，所有元素都将继承它...... 特别感谢这个人：

使用CSS将单个字体应用于整个网站

- arash yousefi