css - 摆脱 li last item counter

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

Answer 2

您可以应用一个 css 类来重置该计数器，如下例所示：

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

检查我的例子：

http://www.aeon-dev.org/tests/before_pseudo_ie.html

Answer 3

您使用的浏览器是否可能不支持content, counter-reset, :before, 或counter-increment？

我很确定 IE 没有，我不确定其他人。如果是这种情况，您只是收到默认编号列表：简而言之，浏览器将忽略较新的 CSS。

Answer 4

出于好奇，在这种情况下，您为什么要使用计数器重置？为什么不设置

list-style: decimal;

然后为您的 html 添加一个类到您的最后一个<li>标签，例如<li class="last">？

然后你可以设置

li.last { list-style: none; }