CSS3—nth-child()和nth-of-type()

CSS3選擇器「:nth-child()」與「:nth-of-type()」用法大不同

CSS, CSS3, 網頁設計 | 2014/07/17

　　雖然說目前CSS3還沒正式的標準化，但新的屬性已為網頁帶來許多的便利，像是大家所熟悉的圓角框、陰影、漸層、多欄位....，甚至目前正夯的RWD自適應，這些都是需要使用到CSS3，除此之外CSS3還提供了許多的選擇器可使用，如此一來就可大量的減少一些類別的設定，直接透過HTML的標籤就可直接進行選擇與樣式的設定，雖然說很方便，但在CSS3有二個選擇器長的很像nth-child與nth-of-type，在正常情況下，二個用起來很像，但若HTML的結構改變時，二個就大不同啦!!!因此梅干作了一個小範例，來幫大家解惑，這二個屬性的最大差別什麼地方。

---

CSS3－:nth-child()
當網頁中有4個p標籤時，可用nth-child的方式，來進行選擇，當下odd表示，只要是單數列背景就會套用成淺灰色。

---

這時候只要是奇數列的p標籤，背景就會變成淺灰色，在這種情況下，即便使用nth-of-type也會得到一樣的效果。

---

改變一下網頁的架構，把p標籤下方，加入<hr>來將區塊與區塊間來畫一條。

---

這時就會看到，全有p標籤的背景都變成淺灰色的了。

---

原因就出在，當使用nth-child時，它並不是只篩選p標籤，而是網頁中的所有標籤都會一起計算，所以可看到，這時所有的p就變成奇數列了。

---

CSS3－:nth-of-type()
這時只要把原本的nth-child改成nth-of-type，就只會針對網頁中的p標籤進行篩選。

---

鏘~鏘~這時候就只有在奇數列的p標籤的背景才會套用淺灰色 。

转自：https://www.minwt.com/webdesign-dev/css/10885.html