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

我有一个像这样的文件

<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会很困难，因为需要编辑的文件很多。另外上面显示的代码出现在不同的地方，所以使用>选择器不是解决方案...有人知道该怎么做吗？

您无法可靠地使用:not()CSS 中用于排除元素和/或其后代的选择器。其原因解释于这个答案 https://stackoverflow.com/a/10711731/106224（以及它链接到的其他一些）：

您不能使用组合器。这适用于 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 https://stackoverflow.com/q/7084112/106224 and 2 https://stackoverflow.com/a/8540726/106224），但它们通常依赖于 HTML 结构，因此实用性非常有限。

由于您的标记是不可预测的，您无法编辑它或使用>选择器，恐怕除了找到一种方法将类应用到您的顶部之外，您没有什么出路div并使用该类，如Fluidbyte 演示 https://stackoverflow.com/a/10870614/106224，和/或使用 jQuery，如上面所暗示的。