我将如何使用 CSS 定位这个 div？答案

【问题标题】：How would I target this div using CSS?我将如何使用 CSS 定位这个 div？
【发布时间】：2014-03-07 11:09:43
【问题描述】：

在下面的代码中，如何使用 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>

【问题讨论】：

标签： css css-selectors

【解决方案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。或者，inheritwould work too。

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

EAXMPLE HERE

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

【讨论】：

只要 HTML 不包含任何其他类 b:jsfiddle.net/WvL88/1
+的使用还假设.b元素连续不超过2个。
如果我没记错的话，Firefox 仍然使用前缀-moz-initial。
@Adrift：哦，这很好。希望 IE 最终学会它不会花费太长时间。

【解决方案2】：

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

div > :nth-child(5){

}

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

【讨论】：