CSS：設置頁面上所有元素的樣式，除了特定元素的子元素？

Question

所以讓我們假設我有這個代碼。 當它被格式化時，可能最容易看到js fiddle本身發生了什么。

這是 HTML 的一些示例：

<div>
  <h1>Anything outside of #keep-original should be set color: var(--colour-1) !important</h1>
</div>
<div id='keep-original'>
  <h1>Stuff inside #keep-original should keep original colour</h1>
</div>
<div>
  <h1>Anything outside of #keep-original should be set color: var(--colour-1) !important</h1>
</div>

 :root { --colour-1: red; } /* invalid CSS *:not(#keep-original *){ color: var(--colour-1); } */ /* formatting stuff */ * { margin: 0px; padding: 0px; color: white; } html { height: 100%; } body { display: grid; grid-template-columns: repeat(3, 1fr); background: #222; height: 100%; } body>div { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } div * { display: inline; }.c1, .c1 * { color: #ff6500ff; }.c2, .c2 * { color: #f0ff00ff; }.c3, .c3 * { color: #1fc102ff; }.c4, .c4 * { color: #02c1acff; }.c5, .c5 * { color: #0f2bfdff; }.c6, .c6 * { color: #fc0bbfff; }

 <div> <h4>Anything</h4> <h3>outside</h3> <h2>the</h2> <h1>middle</h1> <h1>div</h1> <h2>should</h2> <h3>be</h3> <h4>--colour-1</h4> </div> <div id='keep-original'> <h3 class='c1'>This</h3> <h2 class='c2'>text</h2> <h1 class='c3'>should</h1> <h2 class='c4'>be</h2> <h3 class='c5'>unaffected</h3> <h1 class='c6'>including <p>nested<span> elements<a> like<p> these</p></a></span></p> </h1> </div> <div> <h4>Anything</h4> <h3>outside</h3> <h2>the</h2> <h1>middle</h1> <h1>div</h1> <h2>should</h2> <h3>be</h3> <h4>--colour-1</h4> </div>

假設我希望頁面上的所有元素都具有某種顏色，但特定元素的子元素除外。 例如，這顯然設置了所有元素的顏色：

:root{
    --colour-1: red;
}

*{
     color: var(--colour-1) !important
 }

從邏輯上講，我想做這樣的事情（即“全選，#keep-original 的孩子除外”），但 CSS 不支持它：

*:not(#keep-original *){
    color: var(--colour-1);
}

我意識到我可以通過例如將.keep-original class 添加到#keep-original的所有子項，然后應用 css 選擇器*:not(.keep-original)的顏色樣式，在 JS 中輕松實現我想要的，但我我想知道，是否可以純粹在 css 中做我想做的事？ 我覺得這應該是一件很容易做到的事情，所以也許我錯過了一些非常明顯的事情......

Answer 1

你很近。 盡管有相關標准，但:not()對 ID 選擇器的作用並不像您期望的那樣好。

這不起作用：

*:not(#keep-original) * {
  color: var(--colour-1);
}

但這確實：

div:not(#keep-original) * {
  color: var(--colour-1);
}

出於某種原因，您必須在:not()前面加上比*更具體的東西。

我建議您改用 class （無論如何這總是一個好主意）：

<div class='keep-original'>

然后這將起作用：

*:not(.keep-original) * {
  color: var(--colour-1);
}