HTML中 結構僞類選擇器的區別

1. 類型

  結構僞類選擇器 -child 和 -of-type 分別有五個前綴，即 nth，nth-last，first，last，only（少用，不作示例）

1.1  -child類型： first-child,  last-child,  nth-child（n）,  nth-last-child（n）.

示例：-child類型的選擇器，首先選擇的是位置，其次是在看元素， 例如  .one p:nth-last-child(6) { font-weight: bold; } 這個選擇器 首先會在父元素 .one 下從末尾查找其倒數第六個元素，而後再判斷這個元素是否是 P 元素，若是是，則爲這個元素添加後面的樣式； 若是父元素 .one 下只有五個子元素 或者 第六個元素不是 P 元素，則此樣式不會做用於任何元素。   例如： .one p:last-child { color: green; }，意思是在父元素 .one 下查找最後一個元素，再判斷是不是P元素，若是是應用後面的樣式，若是是P元素之外的其餘元素，此樣式無做用。

      

E：first-child   查找父元素下的第一個子元素

E：last-child    查找父元素下的最後一個子元素

E :nth-child（n）  從頭開始查找父元素下第 n 個子元素

E :nth-last-child（n） 從末尾開始查找父元素下的倒數第 n 個元素。

 

2.2   -of-type類型:  first-of-type，last-of-type，nth-of-type，nth-last-of-type

示例： -of-type 類型的選擇器。首先查找子元素，再查找其位置。 例如： .one p:first-of-type { color: red; } 樣式，先在父元素 .one 下 查找全部的 P 元素，而後再找第一個，設置後面的樣式；若是父元素 .one 下沒有 P 元素，則此樣式無做用。例如： .one span:nth-last-of-type(2) { font-size: 26px; } 樣式，先在父元素 .one 下查找全部的 span 元素，再找到的span中從最後開始找到第二個（即倒數第一個span），設置後面的樣式。

 

示例：

 總結： -child類型的選擇器，首先選擇的是位置，其次是在看元素。

           -of-type 類型的選擇器。首先查找子元素，再查找其位置。