CSS3 Nth-child詳解

一、什麼是CSS3 Nth-child

CSS3 Nth-child是一個偽類選擇器，它能夠選擇特定的HTML元素。通過Nth-child這個偽類選擇器，我們可以輕鬆的為不同位置的元素來進行樣式的設置。相比於其他選擇器，它擁有更強的靈活性，能夠達到我們比較理想的效果。

二、CSS3 Nth-child的語法

/*基本語法*/
element:nth-child(n)

/*n可以是以下任意一個值*/
:nth-child(2) /*表示為第2個元素*/
:nth-child(2n) /*表示為偶數元素，0也算*/
:nth-child(2n+1) /*表示為奇數元素*/
:nth-child(3n+1) /*表示每3個元素中的第1個*/

其中element表示需要篩選的元素，n表示某個位置或某個位置的倍數或某個位置倍數加上一個常數。

三、CSS3 Nth-child的應用

1. CSS3 Nth-child對於表格的應用

如下代碼，需要隔行變色：

table tr:nth-child(odd){/*odd代表奇數行*/
  background-color: #f2f2f2;
}

這個樣式的意思是，選擇表格中的奇數行，並設置背景色。而選擇偶數行，我們只需把odd改成even即可。

2. CSS3 Nth-child對於列表的應用

如下代碼，需要對列表裡面的第3個、第6個、第9個等位置的子元素背景色進行設置：

li:nth-child(3n){
    background-color: #f2f2f2;
}

該代碼可以將列表中每3個子元素為一組，且在這些子元素中選擇位於第3個的元素，然後進行樣式的設置。

3. CSS3 Nth-child對於圖片列表的應用

代碼如下，需要每2個li元素，就對它裡面的img元素的寬和高進行縮小：

li:nth-child(2n) img{
    width: 100px;
    height: 100px;
}

我們可以通過上面這段代碼選擇每隔2個li元素，然後對該li元素裡面的img元素進行樣式的設置。

四、CSS3 Nth-child的使用技巧

1. 固定元素樣式

通過上面的學習我們可以發現，CSS3 Nth-child可以選中某個位置的元素，使我們可以不必寫多個類或者id，更易維護，更加高效，而且代碼也更加簡潔。

2. 選擇多個位置的元素

CSS3 Nth-child不僅則十分方便的，還可以通過不同的參數，選擇多個不同位置的元素，省去了選擇器樹的長鏈，簡化了代碼的編寫。

3. 兼容性問題

CSS3 Nth-child雖然使用簡單，但是要注意兼容性，老的瀏覽器完全適配不了我們的代碼，會導致bug的出現。在寫兼容性代碼的時候，我們可以上百度或其他網站查看選取不同位置元素的方法。

五、總結

CSS3 Nth-child選擇器可以非常方便的選擇元素，不僅能選取特定位置元素，還可以以此為基礎，選擇多個位置的元素。說白了，Nth-child就是通過演算法選取元素，這個時候也可以理解為，根據位置，元素的排列順序來獲取元素，從而方便的給不同位置的元素進行樣式的設置。但是，在使用這個選擇器的時候，還是要注意兼容性問題。