3

私は厄介な問題を抱えています..リストの最初の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>

返信ありがとうございます

4

4 に答える 4

1

現在の CSS の後に、次を追加します。

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

これにより、最後の要素のスタイルが「リセット」されます。

編集: :last-childを使用しているため、これは IE8 では機能しないことに注意してください。IE6/7/8 との互換性が必要な場合は、HTML マークアップを手動で挿入する代わりに、JQuery などを使用します。

于 2009-09-10T16:39:58.677 に答える
1

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

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

私の例を確認してください：

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

于 2009-09-10T16:42:23.787 に答える
1

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

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

于 2009-09-10T16:46:41.687 に答える
0

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

list-style: decimal;

そして、あなたのhtmlの<li>ように最後のタグにクラスを追加します<li class="last">か？

次に、設定できます

li.last { list-style: none; }
于 2009-09-10T20:17:00.637 に答える