CSS 選擇器（如果元素沒有特定的父元素）

Question

如果某個元素沒有某個父元素，我想更改該元素的樣式，而不必將其覆寫為其原始值。

參見https://jsfiddle.net/xqb2z8tc/ 上面程式碼的問題是，由於mixin的使用較多，它會產生大量的css，所以我們想重寫它。我想過使用 ':has()' 選擇器（瀏覽器支援對我們來說沒問題），但我不知道如何使用。

類似於下面的程式碼，但它應該適用於所有情況，請參閱上面的 jsfiddle。

.dark-view:not(:has(.obox)) p {
  color: white;
}

Answer 1

根據我對問題的解釋，您似乎希望將color: #fff 應用於.dark- 中的所有

## 元素view 不是.obox 元素的後代。如果是這種情況，請考慮使用選擇器 .dark-view p:not(.obox *):

p {
  color: #111;
}

.dark-view p:not(.obox *) {
  color: #fff;
}

/* irrelevant demo stuff */
.dark-view {
  background: #333;
  padding: 10px;
}

.obox {
  background: #eee;
  border: 1px solid red;
  padding: 2px;
  margin-bottom: 5px;
}

<div class="dark-view">
  
  <div class="obox">
    <p>default</p>
  </div>
  
  <div>
    <div class="obox">
      <p>default</p>
    </div>
  </div>
  
  <div>
    <div>
      <div class="obox">
        <p>default</p>
      </div>
    </div>
  </div>
  
  <p>ondark</p>
  <div>
    <p>ondark</p>
  </div>
</div>

<p>default</p>

<div class="dark-view">
  <p>ondark</p>
  <div>
    <p>ondark</p>
  </div>
  <div>
    <div>
      <p>ondark</p>
    </div>
  </div>
</div>