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

您无法可靠地使用CSS中的:not()选择器来排除元素和/或其后代。它的原因在this answer（以及它链接到的其他一些）中进行了解释：

您无法使用组合器。这适用于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并使用该类，如demonstrated by Fluidbyte和/或使用jQuery，如上所示。

Answer 2

我通常发现通过类包含您需要的内容然后尝试排除后代元素会更容易。请看这里的小提琴：http://jsfiddle.net/cLtHg/

负责继承问题，并且更加跨浏览器友好。

Answer 3

将:first-child与其父元素的ID或类一起使用。如果您无法使用CSS捕获元素，建议使用 Javascript 或 jQuery 。

Answer 4

您是否尝试过:first-child或:nth-child() selecor？

Answer 5

如果你真的没有触及HTML，那么一个简单但很脏的方法是将样式应用于第一个div然后从后续div中删除它们，如下所示：

div {margin-bottom: 20px; border: 1px solid #ccc;}
div div {margin-bottom: 0; border: none;}

这里的主要缺点是儿童div中的某些样式可能会被意外删除。取决于他们的风格如何。

Answer 6

此方法对我有用，可以将样式应用于所有子元素。

CSS：

#abc,
#abc * {
  font-family: monospace !important;
}

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

6 个答案: