CSS如何设置多列每隔交叉颜色
CSS如何设置多列每隔交叉颜色
慕码人8056858浏览 493回答 3
3回答
-
心有法竹
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> 运行效果： -
慕仙森
css3有个nth-child(odd)和nth-child(even);如：123456789101112131415161718192021222324<!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设置，如：1234$(document).ready(function(){ $("p:nth-child(even)").css("color","blue"); $("p:nth-child(odd)").css("color","red");});
随时随地看视频慕课网APP
相关分类
CSS3