html - css nth-child(3n+1) 在子节点之间有 'another' 元素时不起作用

Question

我的 HTML 代码:

<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span12">banner</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
<div class="span4">9</div>

CSS:

.span4:nth-child(3n+1){
    color: red;
}

结果必须有 1、4、7 个红色。但事实并非如此。示例:http://jsfiddle.net/473UR/如何解决这个问题？

Answer 1

.nth-child 适用于连续元素。如果中间有任何其他元素，它会从第一个开始计算。

<div class="span4">1</div>  <-- this is first-child -->
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span12">banner</div>
<div class="span4">4</div>   <-- sequence reset.
<div class="span4">5</div>
<div class="span4">6</div>   
<div class="span4">7</div>
<div class="span4">8</div>
<div class="span4">9</div>