CSS3是前端開發中經常用到的一種技術,它可以實現很多酷炫的效果,其中就包括表格變色。
.table-striped {
background-color: #f9f9f9;
}
.table-striped tr:nth-child(even) {
background-color: #f2f2f2;
}
上面的代碼就是實現表格斑馬線效果的代碼。我們可以看到,首先給整個表格添加了一個背景顏色,然后使用:nth-child選擇器對偶數行進行了單獨的背景色設置。
除了斑馬線效果以外,還可以使用:hover選擇器實現鼠標移動到表格行上時的變色效果,代碼如下:
tr:hover {
background-color: #f5f5f5;
}
利用:hover選擇器,我們可以很簡單地給表格行設置鼠標移動的效果。
總之,CSS3提供了很多實現表格變色的方法,我們可以根據自己的需求進行選擇。