CSS3的一個非常實用的功能就是可以通過CSS選擇器讓表格的各行顯示不同的背景顏色,讓表格更加直觀。下面我們就來看一下具體的實現方法。
/*設置所有偶數行的背景顏色為灰色*/ tr:nth-child(even) { background-color: #ddd; } /*設置所有奇數行的背景顏色為白色*/ tr:nth-child(odd) { background-color: #fff; }
現在我們來解釋一下上面的代碼。首先,我們使用nth-child選擇器來選擇表格的行,其中even表示偶數行,odd表示奇數行。然后,我們分別為偶數行和奇數行設置不同的背景顏色。
需要注意的是,在使用這個方法時,只有在表格中設置了明確的行數才能生效。如果表格中行數不固定,或存在分組表頭等情況,就需要用到其他的方法來實現。不過,一般情況下,使用上述方法來設置表格行的背景顏色已經足夠。
上一篇css3 圖片切邊