本文共 1181 字，大约阅读时间需要 3 分钟。
现代浏览器通过CSS3方式，而ie6采用jquery实现:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=gbk" /> < title >交替颜色列表的实现
</title> < style type ="text/css" > ul
{
margin:0;
padding:0;
list-style-type:none;
}
#ulist
{
font-size:14px;
line-height:1.5em;
border-top:3px solid #119DBB;
width:15em;
margin:0 auto;
}
#ulist li
{
background-color:#C9F1FA;
cursor:pointer;
padding-left:10px;
}
#ulist li:nth-child(odd)
{
background-color:#FFF;
border-top:1px dotted #14ADCD;
border-bottom:1px dotted #14ADCD;
}
</style> < !--[if IE 6]
> < script type ="text/javascript" src ="jquery.js" > </script> < script type ="text/javascript" > $(document).ready(function(){
$('#ulist li:nth-child(odd)').css('background-color','#fff');
});
</script> < ![endif]--
> </head> < body > < ul id ="ulist" > < li >这是一段测试用的文本
</li> < li >这是一段测试用的文本
</li> < li >这是一段测试用的文本
</li> < li >这是一段测试用的文本
</li> < li >这是一段测试用的文本
</li> < li >这是一段测试用的文本
</li> </ul> </body> </html> 本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/143597
，如需转载请自行联系原作者