在对列表进行控制的时候，我们习惯用li标签，而在使用的时候，往往遇到样试的问题和浏览器兼容的问题
下面看一段新闻列表的应用
<div class="news"> <ul> <li><span>2011-12-20<span><a href="#">新闻标题</a></li> <li><span>2011-12-20<span><a href="#">新闻标题</a></li> <li><span>2011-12-20<span><a href="#">新闻标题</a></li> <li><span>2011-12-20<span><a href="#">新闻标题</a></li> <li><span>2011-12-20<span><a href="#">新闻标题</a></li> </ul> </div>
下面是CSS
.news {width:200px;height:200px;} //层的大小
.news li{line-height:30px;margin-left:10px; border-bottom:1px dashed #dedede;} //li的行高为30，距离左边10个像素 ，下边框加上一条虚线
.news li:last-child {border-bottom:0} //使最后一条记录的虚线隐藏
.news li a{color:#000;font-size:12px;} //设计字体颜色和字号
.news li a:hover{color:red; text-decoration:underline;} //鼠标指向变为红色，并加上下划线
.news li span{float:right;margin-right:10px;} //使span标记右浮动，并距离右侧10个像素
这里使用到了last-child ，last-child的作用是去除最后一个 li 的下边框，这里需要注意的是在 IE6 下这个选择器是无效的。