將 CSS 規則應用於除帶有子元素的元素之外的所有元素

Question

我有這個 CSS 規則：

* {
  font-family: Tahoma;
}  

我想將該規則應用於除此div之外的所有元素，該元素在類中是唯一的，並且是子元素：

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

這個 div 的 font-family 和它的孩子應該由用戶選擇，但現在由於應用了 * 規則，新選擇的字體不能應用到它們，即使有 !important 也是如此。

我想要一些 css 規則，以確保 * 規則將應用於除此 div 及其子元素之外的所有元素。

我什至嘗試使用:not選擇器，但它對孩子們沒有幫助。

謝謝

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>

Answer 2

我將 css 規則更改為：

body {
 font-family: Tahoma !important;
}

所以如果他們沒有自己的元素，所有元素都會繼承它......特別感謝這個人：

使用 CSS 將單個字體應用於整個網站