如何在样式定义中排除包含所有子项的类

Question

我有一个类似的文件

<div>
 <div class="abc">
  <div>
   <!--some more divs inside-->
  </div>
 </div>
</div>

我想要做的是仅将样式应用于第一个div.我试图用div:not(.abc, .abc *),div:not(.abc):not(.abc *),div:not(.abc), div:not(.abc) *但这些都不奏效.编辑html会很困难,因为要编辑的文件很多.此外,上面显示的代码出现在不同的地方,因此使用>选择器不是解决方案...有人知道如何做到这一点？

Answer 1

您无法:not()在CSS中可靠地使用选择器来排除元素和/或其后代.在这个答案中解释了它的原因(以及它链接到的其他一些):

你不能使用组合器.这适用于jQuery,但不适用于CSS:

/* 
 * Grab everything that is neither #foo itself nor within #foo.
 * Notice the descendant combinator (the space) between #foo and *.
 */
:not(#foo, #foo *)

这个特别令人讨厌,主要是因为它没有适当的解决方法.有一些松散的变通方法(1和2),但它们通常依赖于HTML结构,因此在实用性方面非常有限.

而且由于你的标记是不可预测的,你不能编辑它或使用>选择器,我担心除了找到一种方法将一个类应用到你的顶层div并使用该类之外,没有多少出路,如由Fluidbyte演示,和/或使用jQuery,如上所述.