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