Loswerden von li letzten Punkt Zähler
-
05-07-2019 - |
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:
- Online-Buchung
- Coupon Reihenfolge
- Drucken Letters
- Senden von E-Mails
- Ansicht Aufträge
Wie kann ich für den letzten Punkt erreichen nicht so nummeriert werden:
- Online-Buchung
- Coupon Reihenfolge
- Drucken Letters
- 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
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:
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; }