CSS如何設置多列每隔交叉顏色
CSS如何設置多列每隔交叉顏色
慕碼人8056858
2019-05-31 03:02:14
3 回答
心有法竹
TA貢獻1866條經驗 獲得超5個贊
CSS設置多列每隔交叉顏色的方法：
在css里面寫奇數和偶數行的判斷邏輯，并給出不同的顏色值即可。
代碼如下：
<html>
<head>
<title>Table隔行變色</title>
<style>
<!--
tr{
background: #f00; //設置背景色為red，紅色
}
tr:nth-child(2n){
background: #ccc;
}
tr{
background-color: expression((this.sectionRowIndex % 2 == 0) ? "#f00" : "#ccc" ); //奇數行設置為f00，偶數行設置為ccc
}
-->
</style>
</head>
<body>
<table>
<tr><td>111111111</td></tr>
<tr><td>222222222</td></tr>
<tr><td>333333333</td></tr>
<tr><td>444444444</td></tr>
</table>
</body>
</html>
運行效果：
慕仙森
TA貢獻1827條經驗 獲得超8個贊
css3有個nth-child(odd)和nth-child(even);如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <style> p:nth-child(odd) { color:red; } p:nth-child(even) { color:blue; } </style> </head> <body>
<h1>這是標題</h1> <p>第一個段落。</p> <p>第二個段落。</p> <p>第三個段落。</p> <p>第四個段落。</p>
</body> </html> |
但是css3，IE瀏覽器9以下都不兼容，如果需要考慮IE的兼容性的話，建議使用jq設置，如：
1 2 3 4 | $(document).ready(function(){ $("p:nth-child(even)").css("color","blue"); $("p:nth-child(odd)").css("color","red"); }); |
- 3 回答
- 0 關注
- 538 瀏覽
添加回答
舉報
0/150
提交
取消