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，它会起作用

EXAMPLE

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

当孩子之间的'另一个'元素时，css nth-child（3n + 1）不工作

3 个答案: