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

Question

在<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),与b = 1.那是偏移是1所以首先<div>应该跳过.但是第一个大图标与最后一个规则相匹配.我错过了什么？

Answer 1

将n在:nth-child()实际上从零开始计数,而不是一个.从规格:

值a可以是负数,但只有+ 的正值,对于≥0,可以表示文档树中的元素.anbn

虽然它说的是第一个孩子的索引,实际上是1,它所指的是公式的结果,而不是公式的值n.换句话说,第一个子项由一个函数表示,该函数的n计算结果为1,而不是函数的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-"]

或使事情变得更简单,你可以选择的一般兄弟组合子~结合:first-child,而不是:

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

如果重要的话,这还有IE7/IE8支持的附加功能.