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

Question

我有一个恼人的问题..我希望对列表中的前 4 项进行编号，但我想将第五项排除在编号之外..这是我的 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 ;
}

结果:

1. 在线预订
2. 优惠券订购
3. 打印信件
4. 发送电子邮件
5. 查看订单

我怎样才能让最后一项不被这样编号:

1. 在线预订
2. 优惠券订购
3. 打印信件
4. 发送电子邮件
   查看订单

是的 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>

感谢您的任何回复

Answer 1

在您当前的 CSS 之后，添加:

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

这应该“重置”最后一个元素的样式。

编辑: 我应该提一下，由于使用了 :last-child，这在 IE8 中不起作用。 .如果您需要 IE6/7/8 兼容性，我会使用 JQuery 之类的东西，而不是手动插入 HTML 标记。