Question

我有一个问题，nth-child(3n+1)一直在计算我的跨度。这就是我的意思：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

它应该为以下方块着色：

3 * 0 + 1 = 1
3 * 1 + 1 = 4
3 * 2 + 1 = 7

但由于某些原因，在我的所有浏览器和测试中，我不断回复以下内容：

方形1变色
方形6变色
Square 8变色

我不知道为什么它会发生，而不是计算跨度或者我误解nth-child有人可以详细解释出现了什么问题以及为什么我没有得到预期的结果？

Answer 1

您应该使用:nth-of-type代替:nth-child。

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

P.S。：3 * 2 + 1 = 7

JSFiddle

Answer 2

您需要:nth-of-type，而不是:nth-child

#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-of-type(3n+1) {
    background-color: blue;
}

<div id="main">
    <div id="one" class="item">1</div>
    <div id="two" class="item">2</div>
    <div id="three" class="item">3</div> 
    <span class="clear"></span>
    <div id="four" class="item">4</div>
    <div id="five" class="item">5</div>
    <div id="six" class="item">6</div> 
    <span class="clear"></span>
    <div id="seven" class="item">7</div>
    <div id="eight" class="item">8</div>
    <div id="nine" class="item">9</div>
</div>

您的:nth-child(3n+1)公式将选择#main 的第1，第4，第7，第10个孩子，如果他们是div 。所以会发生的是#main的第一个孩子是div。很棒，它被正确选择并着色为蓝色。接下来选择第四个孩子。可悲的是，这是一个跨度，而不是一个div，所以它被忽略了。第七个孩子是一个div（id为6），因为它是一个div，它被选中，虽然不是你希望的方式。从右到左的方式考虑这一点。 div:nth-of-type(3n+1)将遍历#main的子项，选择第1，第4，第7，第10 ......元素，然后应用所选属性（如果该元素是div）。

Answer 3

您的span元素算作孩子。您应该使用nth-of-type。

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

FIDDLE

Answer 4

如其他答案中所述，您应该使用:nth-of-type，但如果从标记中删除所有空:nth-child，您仍可以使用span（空标记仅用于样式目的）永远不是一个好主意，特别是在代码可持续性方面），如果你修改这样的风格

#main > div:nth-child(3n+1) {
    background-color: blue;
    clear: left;
}

Nth-Child计数跨度元素

4 个答案:

JSFiddle