84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
如果某个元素没有某个父元素，我想更改该元素的样式，而不必将其覆盖为其原始值。
参见https://jsfiddle.net/xqb2z8tc/ 上面代码的问题是，由于mixin的使用较多，它会生成大量的css，所以我们想重写它。我想过使用 ':has()' 选择器（浏览器支持对我们来说没问题），但我不知道如何使用。
类似于下面的代码，但它应该适用于所有情况，请参阅上面的 jsfiddle。
.dark-view:not(:has(.obox)) p { color: white; }
根据我对问题的解释，您似乎希望将 color: #fff 应用于 .dark- 中的所有 元素view 不是 .obox 元素的后代。如果是这种情况，请考虑使用选择器 .dark-view p:not(.obox *):
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>
根据我对问题的解释，您似乎希望将
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>