html - Nth-Child 计数跨度元素

标签 html css css-selectors

我有一个问题,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/

相关文章:

javascript - jQuery UI 对多个输入元素具有相同的自动完成功能?

java servlet下载特定目录中的文件

Android 网页需要强制刷新才能显示背景颜色

Jquery 追加悬停 css 样式

html - 移动布局中的 Div 顺序 - Bootstrap 4 行和列

java - 如何使用selenium在java中识别并点击这个span?

html - <p> 起始 - HTML

css - 二十个子菜单 CSS

css - *[data-some-id ='XX' ] 和 [data-some-id ='XX' ] 在性能方面有区别吗?

css - nth-child 或 first/last-child 选择器不起作用。如何正确应用它们?