Question

假设我有以下内容..

<div>
    <div>
        <div>
            <div></div>  <<<Select this one..
            <div></div>  <<<Not this one..
            <div></div>  <<<Select this one..
            <div></div>  <<<Select this one..
        </div>
    </div>
</div>

如何在不添加任何类或ID的情况下选择3 divs？这甚至可能吗？

Answer 1

您可以使用:not()和:nth-child()伪类。

div > div > div > div:not(:nth-child(2)){
  color: red;
}

<div>
  <div>
    <div>
      <div>Test</div> 
      <div>Test</div>
      <div>Test</div>
      <div>Test</div>
    </div>
  </div>
</div>

Demo in jsFiddle

注意：对于ie8 support，您可以在jQuery中使用相同的选择器并按照这种方式设置元素。

$("div > div > div > div:not(:nth-child(2))")
	.css("background-color", "yellow")

<div>
  <div>
    <div>
      <div>Test</div> 
      <div>Test</div>
      <div>Test</div>
      <div>Test</div>
    </div>
  </div>
</div>

<!-- External Resources -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

如果您需要支持IE7，可以使用：

div > div > div > div + div + div, 
div > div > div > div:first-child {
    color: orange;
}

http://jsfiddle.net/4TYcb/1/

Answer 3

div div div :not(:nth-child(2))

将只选择那些div

Answer 4

如果你需要一个也适用于旧版IE的解决方案，你必须考虑到目前为止大多数答案所假设的有点不同。

设置所有第三个孩子的DIV：

div > div > div > div {/* styles for all 4 DIVs */}

然后改回第二个：

div > div > div > div:first-child + div {/* styles only for the second DIV */}

请参阅jsFiddle

但正如我在您对您的问题的评论中所写，您的HTML标记非常“有问题”。

PS：与@Adrift的答案不同的是，第二条规则选择了第二个DIV。恕我直言，这在实践中更有用，而不是排除元素。如果将插入除DIV之外的其他元素，它也会“更强大”。

正如您刚才所说，这不是您想要的，这是实现“您正在寻找的”的另一种选择！

在您的情况下，您还可以使用:nth-of-type()选择器，而不是:nth-child()选择器 - 请参阅Fiddle

如你所见，有很多选择。您应该花时间尝试了解所有这些不同的方法，以便能够决定哪一种最适合您的需求！

我如何用CSS选择它？

4 个答案:

Demo in jsFiddle