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>

它应该为以下方块着色：

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

但出于某种原因，在我所有的浏览器和测试中，我不断收到以下返回信息：

方块 1 着色
方块 6 着色
方块 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) 公式将 select #main 的第 1、4、7、10、children 如果它们是 divs 。所以发生的是#main 的第一个 child 是一个 div。太棒了，它 select 被正确编辑并涂成蓝色。接下来第四个 child 是 selected。遗憾的是它是一个跨度，而不是 div，所以它被忽略了。第七个 child 是一个 div（id 为 6），因为它是一个 div，所以它得到了 selected，尽管不是你希望的那样。以从右到左的方式考虑这一点。 div:nth-of-type(3n+1) 将运行通过 #main 的 children，selecting 1st, 4th, 7th, 10th.. 元素，然后如果该元素是 div.

，则应用 selected 属性

Answer 3

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

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

FIDDLE

Answer 4

如其他答案中所述，您应该改用 :nth-of-type，但如果您从标记中删除所有空的 span，您仍然可以使用 :nth-child（空标记仅适用于样式目的从来都不是一个好主意，尤其是在代码可维护性方面）并且如果您像这样修改样式

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

Nth-Child 计数跨度元素

Nth-Child Counting Span Elements

html

css

css-selectors

JSFiddle