瞭解nnth-child（an + b）：使用CSS3中的公式選擇器？

Question

用於圖標和第一個<div>的孩子的<i>應該有一個大圖標。任何其他<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 in :nth-child()實際上從零開始計數，而不是一個。從spec：

的值可以是負的，但只有an + 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相匹配。

你需要從開始爲僞類符​​號按預期方式工作：

.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支持有額外的好處，以防萬一。