霍者博客

使用伪类:nth-child做出各行变色的效果

一直以来,我需要这个效果的时候,都是用的js来实现的(《div各行变色代码》)。现在好了,有了CSS3里的这个伪类属性,一切就就显的更简单了。

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>使用伪类:nth-child做出各行变色的效果  网页设计学习群 156179014</title>
<style type="text/css">
<!--
ul li{
border-left-width: 7px;
border-left-style: solid;
border-left-color: #333;
}
ul li:nth-child(odd)
{
background:#ff0000;
}
ul li:nth-child(even)
{
background:#0000ff;
}
-->
</style>
</head>
<body>
<ul>
  <li>ntyjntynty别</li>
  <li>人根本男人有一天你讨</li>
  <li>厌你讨厌你讨厌具有哭研究 </li>
  <li>厌你讨厌你讨厌具有哭研究 </li>
</ul>
</body>
</html>


原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/255.html,标题:使用伪类:nth-child做出各行变色的效果

【我来说两句】
分享到:

评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。