font

5月 26, 2015

用兩行CSS設定全部奇數和偶數列表格樣式 /



有時候我們會需要設定表格所有奇數跟偶數的樣式
像這樣:



其實超簡單
用兩行CSS就搞定:



tr:nth-child(odd){
  background:pink;
}

tr:nth-child(even){
  background:#EDF1CB;
}




(odd)就是奇數;而(even)就是偶數的意思。
當然這個用法也可以套用在表格的td上面,
就只是把tr改成td就好:


td:nth-child(odd){
  background:#E8FAF6;
}

td:nth-child(even){
  background:#fff;
}


表格會變成這樣:






nth-child就是個順序的選取器,它有個更變態的用法,
在括弧輸入(odd)跟(even)是奇數跟偶數,輸入數字就變成了選順序!
例如你想要表格的第三列是紅色的、第五列是藍色的,可不可以?可以!

語法只要改成tr:nth-child(3)tr:nth-child(5)就搞定,不過同時設定奇數跟偶數又要指定特定行數的樣式時,(odd)跟(even)的語法權重是比較高的,語法會沒用,所以要記得加上!important。變成這樣:


tr:nth-child(3){
  background:red !important;
}

tr:nth-child(5){
  background:blue !important;
}


表格呈現會是這樣:(顏色是為了讓效果強烈一點,請忽略這張圖的審美)




另外nth-child的這個(1).(2)....(n)這個選取順序的功能,
還可以用來設定網頁選單中多種不同icon,語法超級乾淨簡單!
可以參考這篇文章:使用css3-nth-childn-選取器詳解



好好善用nth-child的用法吧!





2017.4.17補充:
另外也有first-child跟end-child的用法,
用在表格的順序不一定的時候直接固定選取表格的頭尾
例如你有兩欄或三欄的表格,都想設定頭尾要有圓角,
那麼就可以直接對th或td設定:

 .th:first-child , .td:first-child{
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px; 
}

 .th:last-child , .td:last-child{
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px; 
}


只要寫幾行就可以變成這樣:


不過上下表格列隔開要再另一個語法
可見此篇:http://blog.weibbb.com/2017/04/css.html




Related Posts Plugin for WordPress, Blogger...

ShareThis