CSS选择器(如果元素没有特定的父元素)

tp5buhyn  于 2023-07-01  发布在  其他
关注(0)|答案(1)|浏览(223)

如果一个元素没有特定的父元素,我想改变它的样式,而不必将它覆盖到它的原始值。
上述代码的问题是,由于mixin被大量使用,它将生成大量的css,所以我们想重写它。我想使用':has()'选择器(浏览器支持对我们来说是可以的),但我不知道如何。
类似下面的代码,但它应该适用于所有情况,请参阅上面的jsfiddle。

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

wlsrxk511#

从我对这个问题的解释来看,似乎您希望将color: #fff应用于.dark-view中不是.obox元素的后代的所有<p>元素。如果是这种情况,请考虑使用选择器.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>

相关问题