我有一个问题,nth-child(3n+1)
一直在计算我的跨度。这就是我的意思:
#main .item {
display: block;
float: left;
width: 100px;
height: 100px;
margin: 0 10px 10px 0;
background-color: red;
}
span.clear {
display: block;
clear: both;
}
#main > div:nth-child(3n+1) {
background-color: blue;
}
<div id="main">
<div id="one" class="item"></div>
<div id="two" class="item"></div>
<div id="three" class="item"></div>
<span class="clear"></span>
<div id="four" class="item"></div>
<div id="five" class="item"></div>
<div id="six" class="item"></div>
<span class="clear"></span>
<div id="seven" class="item"></div>
<div id="eight" class="item"></div>
<div id="nine" class="item"></div>
</div>
它应该为以下方 block 着色:
- 3 * 0 + 1 = 1
- 3 * 1 + 1 = 4
- 3 * 2 + 1 = 7
但出于某种原因,在我所有的浏览器和测试中,我不断收到以下返回信息:
- 方 block 1 着色
- 方 block 6 着色
- 8 号方 block 着色
除了计算跨度之外,我不知道为什么会发生这种情况,或者我可能误解了 nth-child
有人可以详细解释出了什么问题以及为什么我没有得到预期的结果吗?
最佳答案
您应该使用 :nth-of-type
而不是 :nth-child
。
#main > div:nth-of-type(3n+1) { background-color: blue; }
附注:3 * 2 + 1 = 7
JSFiddle
关于html - Nth-Child 计数跨度元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27865459/