Question

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

<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

在这个特定情况下，您可以使用adjacent sibling combinator, +。

EXAMPLE HERE

.b + .b {
   color:red;
}

以上假设不超过两个相邻的.b元素。如果不是这种情况，假设仍然只有两个.b元素，则general sibling combinator, ~,会更有用。

EXAMPLE HERE

.b ~ .b {
    color:red;
}

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

EXAMPLE HERE

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

值得注意的是，IE中不支持值initial。因此，您可以color:#000使用reset the color back to the defaults。或者，inherit would work too。

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

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/

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

2 个答案: