CSS 中 nth-child 和 nth-of-type 的差別

使用 CSS 時，難免要針對某些相同元素但又不同位置去做變化，如單行要顯示藍底，雙數行要顯示紅底，類似這種例子，到底要用 nth-chiild ? 還是 nth-of-type呢?其實了解之後就很簡單了

使用 nth-child 針對所有元素位置判斷，如以下CSS

nth-child(odd){
  color:red;
}

<p>A1</p>
<hr/>
<p>A1</p>
<p>A1</p>

得到的結果是
A1
--------
A1
A1

那是因為中間多了一個 <hr/> 使得第二個<p> 成為了奇數行，那如果要讓奇數的 A1 變成紅色怎麼辦呢?

nth-of-type(odd){
  color:red;
}

<p>A1</p>
<hr/>
<p>A1</p>
<p>A1</p>

得到的結果是
A1
--------
A1
A1

結論是使用 nth-of-type 才會對相同的元素做處理，^^ 很有意思吧