CSS 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个像素 ，下边框加上一条虚线  dotted (点线式边框)

.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 下这个选择器是无效的。
有个朋友说li设置无效，经检查：第一次是<div class="news">中的class打错，第二次是css文件中写了一个.news ul空行 接着写.news li 导致出错。