DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Geordnete Listen sind nicht die einzigen Elemente, die automatisch nummeriert werden können. Dank der verschiedenen zählerbezogenen Eigenschaften kann jedes Element das.
<body>
<section></section>
<section></section>
<section></section>
<section></section>
</body>body {
counter-reset: my-awesome-counter;
}
section {
counter-increment: my-awesome-counter;
}
section:before {
content: counter(my-awesome-counter);
}Jede <section> beginnt jeweils mit „1“, „2“, „3“ oder „4“.
Sie können den Stil des Zählers steuern, indem Sie die Zählerfunktion durch Kommas trennen. z. B. um sie römische Ziffern verwenden zu lassen
section:before {
content: counter(my-awesome-counter, upper-roman);
}Demo
Weitere Informationen
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 3.1+ | Alle | 9.2+ | 8+ | TBD | TBD |
Der Kerl fuhr nach Hause, ohne für das Rocksteak zu bezahlen! haha
hmm, es sieht so aus, als ob Android und iOS auch eine gute Unterstützung haben.
caniuse.com
Ereignis ohne Skript, wir können die Anzahl der li mit counter-increament ändern
http://codepen.io/nakati/pen/lhzKb
Ich habe Ihren Code etwas bearbeitet, damit er tatsächlich funktioniert.
http://codepen.io/anon/pen/ZYGrJv
Sie müssen die counter-increment-Eigenschaft von li:before auf li selbst verschieben. Außerdem können Sie in der counter-reset-Eigenschaft keine Kommas verwenden, nur Leerzeichen, um Werte zu trennen.
@transGLUKator Danke für den Hinweis.
Aber können Sie erklären, warum das Demo im Artikel die counter-reset-Werte durch Kommas getrennt hat?
Ist es möglich, es so zu verwenden?
Ich bekomme es nicht zum Laufen, es wäre schön, wenn es auch so funktionieren würde.
Ich bin mir ziemlich sicher, dass ‚counter‘ nur innerhalb der ‚content‘-Eigenschaft bei Pseudo-Elementen (z. B. ::before, ::after) funktioniert
Gibt es eine Technik oder einen Rat, wie man die Zähler zu klickbaren Links macht? Ich sehe nicht wie, aber ich wurde gebeten, das auf einem bereits etablierten Design zu tun.
Könnten Sie es nicht einfach in ein Anker-Tag verpacken?
<a class="counter-link"><a/>Versuchen Sie dann in Ihrem CSS so etwas wie ..
Ich bin auf ein Problem gestoßen, bei dem ich Code wie diesen habe
Das funktioniert beim Laden der Seite ohne Probleme. Das Problem, auf das ich stoße, ist, dass jedes Mal, wenn ich über .MarkerLabel fahre, ein zusätzliches ::before-Pseudo-Element innerhalb des .MarkerLabel eingefügt zu werden scheint. So habe ich das ursprüngliche ::before-Pseudo-Element mit einem Zählerwert von 1 und dann, wenn ich mit der Maus darüber fahre, erscheint ein zweites Pseudo-Element mit einem Zählerwert (in diesem Fall) von 54, als ob es beim Überfahren erneut von vorne beginnen würde. Macht für mich keinen Sinn. Hat noch jemand Probleme mit :hover und dem CSS-Zähler?
Es war ein Problem mit der Google Maps API, die zwei Sätze von Markern rendert. Also habe ich den Zähler auf den ersten Satz von .MarkerLabels beschränkt.
Hier ist ein YouTube-Video-Tutorial, ich habe das mit Beispielen etwas detaillierter erklärt. :)
https://goo.gl/Jw2TDD
Es gibt einen großen undokumentierten Aspekt bei der Verwendung mehrerer CSS-Zähler, den dieser Pen demonstriert https://codepen.io/A2D/pen/WdKjRa
Das ist weder so, wie ich es erwartet hätte, noch so, wie ich denke, dass es funktionieren sollte.