我如何使用CSS来定位这个div？

Question

在下面的代码中,我将如何div.b使用CSS 定位第二个？

<div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="a"></div>
</div>

Answer 1

在这个特定的例子中,您可以使用相邻的兄弟组合子+.

这里的例子

.b + .b {
   color:red;
}

以上假设不超过两个相邻.b元素.如果不是这种情况下,一般的兄弟组合子~,将假设存在仍然只有两个比较有用.b的元素.

这里的例子

.b ~ .b {
    color:red;
}

作为替代方案,您还可以使用以下.b内容,无论位置如何,它都可以使用多个元素.最初,用于.b ~ .b设置第二个目标元素的样式.然后,您需要使用.b ~ .b ~ .b重置.b第二个元素后面的.b元素样式.

这里的例子

.b ~ .b {
    color:red;
}
.b ~ .b ~ .b {
    color:initial;
}

从理论上讲,这应该适用于所有情况,例如:

<div class="a">1a</div>
<div class="a">2a</div>
<div class="a">3a</div>
<div class="b">1b</div>
<div class="a">4a</div>
<div class="b">2b</div> <!-- This would be styled red.. -->
<div class="b">3b</div>

值得注意的initial是IE中不支持该值.因此,您可以使用color:#000到的颜色重置为默认值.或者,inherit 也会工作.

作为一个更实际的例子,你可以使用这样的东西:

EAXMPLE HERE

.b ~ .b {
    width:200px;
    background:blue;
    color:#fff;
}
.b ~ .b ~ .b {
    width:auto;
    background:transparent;
    color:#000;
}

Answer 2

还有另一种方法可以实现您想要做的事情.

div > :nth-child(5){

}

http://jsfiddle.net/WvL88/3/