Chcę mieć wiele list "ol", w których wartość licznika ma wartość , a nie resetować między listami. Innym sposobem na powiedzenie tego jest to, że chcę, by licznik pierwszego "li" na drugiej liście był o jeden wyższy od wartości licznika z ostatniego elementu z poprzedniej listy. Czy jest jakaś magia CSS, która to zrobi?Jak używać liczników CSS na listach bez resetowania liczników?
Niezupełnie z samym CSS. Zapewnia on pewną liczbę control over counters (i support is pretty good), ale wciąż jest statyczny w swoim zachowaniu. Tak to działa:
<html>
<head>
<style>
#list-one {
counter-reset : item;
}
#list-two {
counter-reset : item 3;
}
li {
display : block;
}
li:before {
display : inline-block;
content : counter(item) ". ";
counter-increment : item;
}
</style>
</head>
<body>
<ol id="list-one">
<li>One</li><li>Two</li><li>Three</li>
</ol>
<ol id="list-two">
<li>Four</li><li>Five</li><li>Six</li>
</ol>
</body>
</html>
... ale nie można po prostu upuść dwie listy po siebie i mieć drugi automatycznie podnieść gdzie drugi skończył (patrz „3” w drugą regułę CSS). Przy odrobinie kreatywności, możesz prawdopodobnie owinąć stylizację counter-reset za pomocą odrobiny PHP lub czegokolwiek, co używasz do budowania swojej witryny. Oczywiście zależy to od szczegółów twojej sytuacji.
Podczas gdy Su's answer zadziała, nie musisz być tak ciężkozbrojony. Po prostu zresetuj licznik u góry i wszędzie, gdzie go użyjesz, będzie się zwiększał.
body {
counter-reset: item;
}
li {
display: block;
}
li:before {
display: inline-block;
content: counter(item) ". ";
counter-increment: item;
}
zobaczyć ten example
To cały poprawną odpowiedź. –