如果一个元素没有特定的父元素,我想改变它的样式,而不必将它覆盖到它的原始值。上述代码的问题是,由于mixin被大量使用,它将生成大量的css,所以我们想重写它。我想使用':has()'选择器(浏览器支持对我们来说是可以的),但我不知道如何。类似下面的代码,但它应该适用于所有情况,请参阅上面的jsfiddle。
.dark-view:not(:has(.obox)) p { color: white; }
wlsrxk511#
从我对这个问题的解释来看,似乎您希望将color: #fff应用于.dark-view中不是.obox元素的后代的所有<p>元素。如果是这种情况,请考虑使用选择器.dark-view p:not(.obox *):
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>
1条答案
按热度按时间wlsrxk511#
从我对这个问题的解释来看,似乎您希望将
color: #fff
应用于.dark-view
中不是.obox
元素的后代的所有<p>
元素。如果是这种情况,请考虑使用选择器.dark-view p:not(.obox *)
: