CSS-Selektor (wenn das Element kein bestimmtes übergeordnetes Element hat)

Question

Ich möchte den Stil eines Elements ändern, wenn es kein bestimmtes übergeordnetes Element hat, ohne es auf seinen ursprünglichen Wert überschreiben zu müssen.

Siehe https://jsfiddle.net/xqb2z8tc/ Das Problem mit dem obigen Code besteht darin, dass er aufgrund der starken Verwendung von Mixins viel CSS generiert, daher möchten wir ihn neu schreiben. Ich habe darüber nachgedacht, den Selektor „:has()“ zu verwenden (die Browserunterstützung ist für uns in Ordnung), weiß aber nicht wie.

Ähnlich dem Code unten, sollte aber in allen Fällen funktionieren, siehe jsfiddle oben.

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