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标记.

原文地址：https://www.jb51.cc/css/530733.html