li最後のアイテムカウンターを取り除く

Question

迷惑な問題があります..リストの最初の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 ;
}

結果：

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;
}

最後の要素のスタイルを「リセット」する必要があります。

編集： IE8では：last-child 。 IE6 / 7/8との互換性が必要な場合は、手動でHTMLマークアップを挿入する代わりに、JQueryのようなものを使用します。

Answer 2

使用しているブラウザがcontent、counter-reset、:before、またはcounter-incrementをサポートしていない可能性はありますか？

IEはそうではないと確信しており、他のことについても確信が持てません。その場合、デフォルトの番号付きリストを受け取るだけです。要するに、ブラウザは新しいCSSを無視します。

Answer 3

この例のように、cssクラスを適用してそのカウンターをリセットできます：

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

例を確認：

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

Answer 4

好奇心から、この場合、なぜカウンターリセットを使用しているのですか？設定しない理由

list-style: decimal;

そしてあなたのhtmlのために、最後の<li>タグに<li class="last">？

のようなクラスを追加します

その後、設定できます

li.last { list-style: none; }