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

Question

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

<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) 中使用了偏移量，b = 1。即偏移量为 1，因此应跳过第一个 <div>。但是第一个大图标与最后一条规则匹配。我错过了什么？

Answer 1

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

a的值可以是负数，但只有an+b的正值，对于@ 987654328@≥0，可能代表文档树中的一个元素。

虽然它说的是 1 的第一个孩子的索引，确实是这样，但它指的是公式的结果，而不是 n 的值。换句话说，第一个孩子由计算结果为 1 的n 函数表示，而不是由n 函数表示，其中n = 0 或n = 1（无论从哪个开始计数）。

所以公式:nth-child(1n+1)（或代数等价的:nth-child(n+1)）计算n = 0为：

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

或者为了让事情更简单，您可以选择 general sibling combinator ~ 和 :first-child 来代替：

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

这有额外的 IE7/IE8 支持，以防万一。