css奇數偶數選擇器

前端項目開發中，需要根據行數的奇數和偶數的不同，設定不同的顔色顯示，以在視覺上給使用者以良好的浏覽體驗，這裡就需要使用css奇數偶數選擇器。

主要用的：:nth-of-type或者:nth-child。

方式一:nth-child

div:nth-child(odd){


} //奇數行


div:nth-child(even){


} //偶數行      

:nth-child(n) 選擇器比對屬于其父元素的第 N 個子元素，不論元素的類型。

方式二:nth-of-type

div:nth-of-type(odd){
  //奇數行  
} 
div:nth-of-type(even){
  //偶數行 
}      

nth-of-type(n) : 比對同類型中的第n個同級兄弟元素。

差別：nth-child ()  與 nth-of-type()

nth-child(n) : 比對父元素中的第 n 個子元素，元素類型沒有限制。

nth-of-type(n) : 比對同類型中的第n個同級兄弟元素。

n可以是一個數字，一個關鍵字，或者一個公式，比如：nth-child(odd) 奇數 ,nth-child(even) 偶數。

nth-child和nth-of-type的不同之處就是查找元素的方式不同。前者是查找兄弟元素中某個絕對位置的元素，後者是查找同類型元素中某個絕對位置的元素。

相同之處是，兩者都是找到元素之後再與前面的選擇符進行比對，這裡的比對方式是一樣的。

稍微往下延伸，清楚了查找方式，那麼不管前面的選擇符怎麼變，最後都是先查找到元素再與前面的選擇符進行比對。

也就是說選擇符與他們的查找方式沒有關系。

延伸：選中最後一個奇數和偶數

這裡以nth-child為例：​

// 選中最後一個奇數
div:nth-child(odd):last-child {
    margin-bottom: 0;
}
// 選中最後一個偶數
div:nth-child(even):last-child {
    margin-bottom: 0;
}      

本文完~

學習更多技能

請點選下方公衆号

​