Frage

ich ein lästiges Problem habe .. ich meine ersten 4 Elemente in einer Liste will nummeriert werden, aber ich will fünften Punkt auszulassen die Nummerierung .. hier ist mein 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 ;
}

ERGEBNIS:

  1. Online-Buchung
  2. Coupon Reihenfolge
  3. Drucken Letters
  4. Senden von E-Mails
  5. Ansicht Aufträge

Wie kann ich für den letzten Punkt erreichen nicht so nummeriert werden:

  1. Online-Buchung
  2. Coupon Reihenfolge
  3. Drucken Letters
  4. Senden von E-Mails
      Ansicht der Aufträge

und ja 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>

Vielen Dank für jede Antwort

War es hilfreich?

Lösung

Nach dem aktuellen CSS hinzufügen:

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

Das sollte den Stil für das letzte Element 'Reset'.

EDIT: Ich möchte nur erwähnen, dass dies aufgrund der Verwendung von nicht in IE8 funktioniert : last-child . Wenn Sie IE6 / 7/8-Kompatibilität benötigen, würde ich so etwas wie JQuery verwenden, anstatt manuell Einfügen von HTML-Markup.

Andere Tipps

Ist es möglich, dass der Browser Sie verwenden, nicht content, counter-reset, :before oder counter-increment unterstützen?

Ich bin mir ziemlich sicher, dass IE nicht, und ich bin mir nicht sicher über andere. Wenn das der Fall ist, sind recieving Sie einfach der Standard nummerierte Liste. Kurz gesagt, würde der Browser die neueren CSS ignorieren

Sie können eine CSS-Klasse aplly diese Zähler zurücksetzen, wie in diesem Beispiel:

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

Überprüfen Sie mein Beispiel:

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

Aus Neugier, in diesem Fall, warum verwenden Sie das Zähler-Reset überhaupt? Warum nicht gesetzt

list-style: decimal;

und dann für Ihre HTML, eine Klasse zu Ihrem letzten <li> Tag wie <li class="last"> hinzufügen?

Dann können Sie

li.last { list-style: none; }
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top