了解第n个孩子（一个+ B）：选择与式中CSS3？(Understanding nth-child(

在<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 n + b ，为n ≥0，可表示文档树的元素。

虽然说，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支持一个额外的奖金，如果它很重要。

文章来源: Understanding nth-child(an + b): selector with formula in CSS3?