Desidero avere più elenchi "ol" in cui il valore del contatore non è non ripristinato tra gli elenchi. Un altro modo per dirlo è che voglio che il contatore del primo "li" nella seconda lista sia un valore superiore al valore del contatore dell'ultimo elemento della lista precedente. C'è qualche magia CSS che farà questo?Come utilizzare i contatori CSS negli elenchi senza reimpostare i contatori?
Non proprio con solo CSS. Fornisce alcuni control over counters (e support is pretty good), ma è ancora statico nel suo comportamento. Quindi, questo funziona:
<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>
... ma non si può solo cadere due liste uno dopo l'altro e hanno il secondo automaticamente riprendere da dove l'altro lasciato fuori (si veda il "3" nella seconda regola CSS). Con un po 'di creatività, però, potresti probabilmente avvolgere lo stile counter-reset con un po' di PHP o qualsiasi altra cosa tu stia utilizzando per costruire il tuo sito. Questo dipende dai dettagli della tua situazione, ovviamente.
Mentre Su's answer funzionava, non è necessario essere così pesanti. Basta resettare il contatore in alto, e ovunque lo usi, aumenterà.
body {
counter-reset: item;
}
li {
display: block;
}
li:before {
display: inline-block;
content: counter(item) ". ";
counter-increment: item;
}
vedono questo example
Questa è tutta la risposta corretta. –