我有一个烦人的问题..我希望对列表中的前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标记.
