html - Nth-Child 计数跨度元素

Question

我有一个问题，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 有人可以详细解释出了什么问题以及为什么我没有得到预期的结果吗？

Answer 1

您应该使用 :nth-of-type 而不是 :nth-child。

#main > div:nth-of-type(3n+1) { background-color: blue; }

附注:3 * 2 + 1 = 7

JSFiddle