我的 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/ 如何解决这个问题?
最佳答案
.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>
关于html - css nth-child(3n+1) 在子节点之间有 'another' 元素时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21905618/