CSS-Zähler für verschachtelte Liste zurückgesetzt

8

Ich habe Probleme mit counter-reset , wenn ol in div ist. Die rote Liste in der Snippet-Nummerierung sollte lauten:

  

1, 2, 3

nicht:

  

3.1,   3.2,   3.3,

%Vor% %Vor%

Ссылка

    
vrmtm 21.07.2015, 12:55
quelle

3 Antworten

7

Ihr Problem tritt nicht mit der Eigenschaft counter-reset auf, sondern mit der Eigenschaft content und der Funktion counters() . Diese Funktion fügt atomaticaly eine neue Instanz für jedes verschachtelte Element hinzu. Das ist großartig für die verschachtelten ol -Elemente, aber es fügt auch eine Gegeninstanz hinzu, wenn die erste Ebene ol in einem anderen Element verschachtelt ist.

Sie sollten also die Funktion counter() auf der ersten Ebene ol elements verwenden und die Funktion counters() (beachten Sie die "s") auf der zweiten Ebene eins:

Weitere Informationen zu MDN finden Sie unter Nesting-Counter

%Vor% %Vor%

Wie von @harry vorgeschlagen, können Sie auch den Zähler für das erste Kind des Elements ol zurücksetzen entweder mit der Pseudo-Klasse li:first-child oder mit dem Pseudo-Element ol::before , Beispiel:

%Vor% %Vor%
    
web-tiki 21.07.2015, 13:21
quelle
1

Sie müssen div
zurücksetzen Und "nicht zurückgesetzt" ol
So:

%Vor%     
npit 21.07.2015 13:09
quelle
0

Eine Möglichkeit, dies zu umgehen, wäre das Hinzufügen einer Klasse (da Sie ein Element nicht basierend auf dem übergeordneten Element auswählen können) und das Ausschließen von der anfänglichen Auswahl mit :not pseudo-class:

HTML:

%Vor%

CSS:

%Vor%

nach diesem JSFiddle

    
robjez 21.07.2015 13:11
quelle

Tags und Links