方式一:nth-child

div:nth-child(odd){
} //奇數(shù)行
div:nth-child(even){
} //偶數(shù)行

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

方式二:nth-of-type

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

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

區(qū)別：nth-child ()? 與 nth-of-type()

nth-child(n) : 匹配父元素中的第 n 個子元素，元素類型沒有限制。
nth-of-type(n) : 匹配同類型中的第n個同級兄弟元素。

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

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

相同之處是，兩者都是找到元素之后再與前面的選擇符進行匹配，這里的匹配方式是一樣的。

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

也就是說選擇符與他們的查找方式?jīng)]有關系。

延伸：選中最后一個奇數(shù)和偶數(shù)

這里以nth-child為例：

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

本文完~

學習更多技能

請點擊下方公眾號