html - How would I select this with CSS?

Question

Lets say I have the following..

<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>

How would I select those 3 divs without adding any classes or ids? Is this even possible?

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>

jsFiddle 中的演示

注意：对于ie8 支持，您可以在 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

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