【CSS3】---結構性僞類選擇器—nth-child(n)+nth-last-child(n)

結構性僞類選擇器—nth-child(n)

「:nth-child(n)」選擇器用來定位某個父元素的一個或多個特定的子元素。其中「n」是其參數，並且能夠是整數值(1,2,3,4)，也能夠是表達式(2n+一、-n+5)和關鍵詞(odd、even)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值爲0時，選擇器將選擇不到任何匹配的元素。

經驗與技巧:當「:nth-child(n)」選擇器中的n爲一個表達式時，其中n是從0開始計算，當表達式的值爲0或小於0的時候，不選擇任何匹配的元素。以下表所示：

案例演示

  經過「:nth-child(n)」選擇器，而且參數使用表達式「2n」，將偶數行列表背景色設置爲橙色。

HTML代碼：

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ol>​

CSS代碼：

ol > li:nth-child(2n){
  background: orange;
}
//奇數傳（2n+1）

 

演示結果：

結構性僞類選擇器—nth-last-child(n)

「:nth-last-child(n)」選擇器和前面的「:nth-child(n)」選擇器很是的類似，只是這裏多了一個「last」，所起的做用和「:nth-child(n)」選擇器有所區別，從某父元素的最後一個子元素開始計算，來選擇特定的元素。

案例演示

選擇列表中倒數第五個列表項，將其背景設置爲橙色。

HTML代碼：

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
  <li>item11</li>
  <li>item12</li>
  <li>item13</li>
  <li>item14</li>
  <li>item15</li>
</ol>​

CSS代碼：

ol > li:nth-last-child(5){
  background: orange;
}
//選擇列表中倒數第5個元素

 

演示結果：