CSS 选择器（如果元素没有特定的父元素）

Question

如果元素没有某个父元素，我想更改其样式，而不必将其覆盖为其原始值。

参见https://jsfiddle.net/xqb2z8tc/ 上面代码的问题是，由于mixin的使用较多，它会生成大量的css，所以我们想重写它。我想过使用 ':has()' 选择器（浏览器支持对我们来说没问题），但我不知道如何使用。

类似于下面的代码，但它应该适用于所有情况，请参阅上面的 jsfiddle。

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

Answer 1

从我对问题的解释来看，您似乎希望将

color: #fff

应用于

<p>

中不是

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

Answer 2

虽然 Wongjn 的答案完全符合我的要求，但我找到了一个使用 CSS 变量的更清晰的解决方案。 这样做的好处是，当多个项目应该将颜色重置回其原始值时，我不会到处都是一长串 :not() 选择器。相反，我只需要将它们添加到根选择器

:root, .obox {
  --text-color: #111;
}

.dark-view {
  --text-color: white;
}

p {
  color: var(--text-color);
}

/* 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">
      <div>
        <p>default</p>
      </div>
      </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>