一、需求描述
在開發過程中,會碰到一些選擇器的需求:
例如使列表中的第一項或者最後一項顯示不同的樣式 、列表中的奇數或者偶數項顯示不同的背景色 . . . 等等。
我們可以通過 CSS 來實現這樣的效果,CSS 給我們提供了幾個樣式參數:first-child
、last-child
、nth-child(n)
。
二、使用方法的代碼示例
1.常見使用方法
first-child first-child:選擇列表中的第一個標籤。
舉例:第一行字體顯示爲紅色,代碼如下:
li:first-child{
color: red;
}
last-child last-child:選擇列表中的最後一個標籤。
舉例,最後一行字體顯示爲綠色,代碼如下:
li:last-child{
color: green;
}
nth-child(n) nth-child(n):選擇列表中的第 n 個標籤。
舉例:第三行字體顯示爲藍色,代碼如下:
li:nth-child(3){
color: blue;
}
nth-child(odd) nth-child(odd):選擇列表的奇數行。
舉例,奇數行背景顯示爲灰色,代碼如下:
li:nth-child(odd){
background: #999;
}
我們可以通過另外的方法選擇奇數行,例如: nth-child(n+1) 、 nth-child(2n-1) 等。
代碼如下:
/*First*/
li:nth-child(n+1){
background: #999;
}
/*Second*/
li:nth-child(2n-1){
background: #999;
}
nth-child(even) nth-child(even):選擇列表的偶數行。
舉例:偶數行背景顯示爲土黃色(不要在意那些細節),代碼如下:
li:nth-child(even){
background: #F6E0AF;
}
同樣,我們可以通過另外的方法選擇奇數行,例如: nth-child(2n) 。
代碼如下:
li:nth-child(2n){
background: #F6E0AF;
}
上面的幾種方法運行效果如下圖:
2.更加靈活的使用方法
上面是幾種比較常見的選擇方法,我們還可以通過 CSS 更靈活的進行選擇,有下面幾種方法:
nth-child(-n+n) nth-child(-n+n):選擇第 n 個之前的元素(此處的 n 是後面的那個,下同)。
舉例:前三行背景色設置爲綠色,代碼如下:
li:nth-child(-n+3){
background: #2cae1d;
}
nth-child(n+n) nth-child(n+n):選擇第 n 個之後的元素。
舉例:第五行及以後背景色設置爲藍色,代碼如下:
li:nth-child(n+5){
background: #0ab1fc;
}
nth-last-child(n) nth-last-child(n):選擇倒數第 n 個元素。
舉例:倒數第三元素字體設置爲紅色,代碼如下:
li:nth-last-child(3){
color: red;
}
同樣可以使用上面的方法進行拓展,方法如下:
nth-last-child(n+n) nth-last-child(n+n):選擇倒數第 n 個之前的元素。
舉例:倒數第三個及之前的元素字體設置爲粗體,代碼如下:
li:nth-last-child(n+3){
font-weight: bold;
}
上面的幾種方法運行效果如下圖:
nth-last-child(3n) nth-last-child(3n):選擇第 3、6、. . . 個元素,選擇三的倍數。
舉例:第3、6、 . . . 三的倍數行背景色設置爲橙色,代碼如下:
li:nth-child(3n){
background: orange;
}
nth-last-child(3n+1) nth-last-child(3n+1):選擇第 1、4、7 個元素,從第一個開始每個遞增三個。
舉例:第1、4、7 . . . 行背景色設置爲紅色,代碼如下:
li:nth-child(3n+1){
background: red;
}
上面的幾種方法運行效果如下圖:
三、總結
當然,還有更多的使用方法,我在這只是簡單的記錄一下我常用的幾種,也希望大家能夠舉一反三,能在項目中更好的利用起來。