7

我有一个像

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

4

5 回答 5

10

您不能可靠地使用: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，如上所述。

于 2012-06-03T13:21:57.137 回答
1

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

这解决了继承问题，并且对跨浏览器更加友好。

于 2012-06-03T13:09:14.193 回答
0

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

于 2012-06-03T13:05:20.383 回答
0

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

于 2012-06-03T13:14:20.003 回答
0

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

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

这里的主要缺点是子 div 中的某些样式可能会被无意中删除。首先取决于它们的样式。

于 2012-06-03T13:23:39.643 回答