css-摆脱li最后一个项目计数器

我有一个烦人的问题..我希望对列表中的前4个项目进行编号,但我想在编号中保留第5个项目..这是我的CSS:

#alternate_navigation ol
{
    display:block;
    padding:0;
    margin:0;
    counter-reset: item;
}

#alternate_navigation li
{
    display:block;
    padding:0px 0px 0px 10px; 
    margin:0;
    background: url('images/list_bg.jpg') no-repeat;
    height:19px;
    width:99%;
    border-bottom:1px solid #B9B5B2;
}

#alternate_navigation li:before 
{ 
  content: counter(item) ". "; 
  counter-increment: item ;
}

结果:

>在线预订
>优惠券订购
>印刷信件
>发送电子邮件
>查看订单

我如何才能使最后一项没有这样编号:

>在线预订
>优惠券订购
>印刷信件
>发送电子邮件
  查看订单

是的HTML

<div id="alternate_navigation">
                   <ol>
                   <li><a href="#">Online Booking</a></li>
                   <li><a href="#">Coupon Ordering</a></li>
                   <li><a href="#">Print Letters</a></li>
                   <li><a href="#">Send Emails</a></li>
                   <li><a href="#">View orders</a></li>
                   </ol>
                   <div>

谢谢你的回应

最佳答案
在当前CSS之后,添加

#alternate_navigation li:last-child:before {
    content: "";
    counter-increment: none;
}

那应该“重置”最后一个元素的样式.

编辑:我应该提一下,由于使用:last-child,这在IE8中将不起作用.如果需要IE6 / 7/8兼容性,我将使用类似JQuery的方法,而不是手动插入HTML标记.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效