css nth-child(3n+1) 在 childred 之间'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>

Answer 2

那是因为 .span12 也算作一个孩子。如果删除它，它将起作用

Answer 3

你需要移动你的横幅div，它会工作

例

<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</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>
<div class="span12">banner</div>