理解 nth-child(an + b)：CSS3 中带有公式的选择器？

The <i>用于第一个图标和子元素<div>应该有一个大图标。任何其他<i>任何的孩子<div>（但不是第一个）应该有一个中等大小的图标：

<div class="row list-item">
       <div class="span1">
           <i class="icon-user"></i>
       </div>

       <div class="span3">
           <div>
               <a href="#">Main Link</a> <i class="icon-male"></i>
           </div>
           <i class="icon-mail"></i> <a href="#">Link 2</a>
           <i class="icon-mobile"></i> <a href="#">Link 3</a>
       </div>
</div>

相关CSS：

.list-item > div:first-child {
    text-align: center;
}

.list-item i[class^="icon-"], .list-item[class*=" icon-"] {
    text-shadow: 3px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Only i with icon-* class, where div is first child */
.list-item > div:first-child > i[class^="icon-"],
    .list-item > div:first-child > i[class*=" icon-"] {
    font-size: 60px;
    line-height: 80px;
}

/* Any i with icon-* class, where div is not first child */
.list-item > div:nth-child(1n+1) > i[class^="icon-"], 
    .list-item > div:nth-child(1n+1) > i[class*=" icon-"] {
    vertical-align: middle;
    font-size: 24px;
    line-height: 24px;
}

所以我在公式中使用了偏移量nth-child(an + b), with b = 1。也就是说偏移量是 1 所以首先<div>应该被跳过。但第一个大图标与最后一条规则匹配。我缺少什么？

The n in :nth-child()实际上是从零开始计数，而不是从一开始。来自spec:

价值a可以是负值，但只能是正值an+b, for n≥0，可以代表文档树中的一个元素。

虽然它说的是 1 的第一个孩子的索引，确实如此，但它指的是公式的结果，而不是值n。换句话说，第一个孩子由以下函数表示n计算结果为 1，而不是通过函数n where n = 0 or n = 1（以从哪个开始计数为准）。

所以公式:nth-child(1n+1)（或代数上等价的:nth-child(n+1)) 评估为n = 0 as:

  1n + 1
= 1(0) + 1
= 0 + 1
= 1

这会导致你的第一个div正在匹配。

你需要从2为了使伪类表示法按预期工作：

.list-item > div:nth-child(1n+2) > i[class^="icon-"], 
.list-item > div:nth-child(1n+2) > i[class*=" icon-"]

或者为了让事情变得更简单，您可以选择通用兄弟组合器~和这个结合:first-child反而：

.list-item > div:first-child ~ div > i[class^="icon-"], 
.list-item > div:first-child ~ div > i[class*=" icon-"]

如果重要的话，这还有 IE7/IE8 支持的额外好处。