Αντίστροφη επαναφορά - CSS-Κόλπα

Η counter-resetιδιότητα επιτρέπει την αυτόματη αρίθμηση στοιχείων. Όπως μια παραγγελία (

article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

Η counter-resetιδιότητα χρησιμοποιείται για την επαναφορά ενός μετρητή CSS σε μια δεδομένη τιμή.

Είναι μέρος της μονάδας μετρητή CSS που είναι μέρος του δημιουργούμενου περιεχομένου, αυτόματης αρίθμησης και παραθέτει τις προδιαγραφές CSS2.1, επεκτείνεται στις προδιαγραφές Δημιουργίας και αντικατάστασης αντικειμένου CSS3.

Σύνταξη

counter-reset: ( ?)+ | none

Που…

είναι το όνομα του μετρητή που θέλετε να επαναφέρετε
είναι η τιμή για την επαναφορά του μετρητή σε
none απενεργοποιήστε τον μετρητή

body ( counter-reset: my-awesome-counter 0; )

Σημείωση: η προεπιλεγμένη τιμή για τον ακέραιο είναι 0. Εάν δεν έχει οριστεί ακέραιος αριθμός μετά το όνομα μετρητή, θα επαναφερθεί σε 0. Έτσι, αυτό λειτουργεί όπως αναμένεται:

body ( counter-reset: my-awesome-counter; )

Μπορείτε να επαναφέρετε πολλούς μετρητές ταυτόχρονα με μια λίστα χωρισμένη με χώρο, ο καθένας με τη συγκεκριμένη τιμή του εάν το επιθυμείτε.

body ( counter-reset: my-awesome-counter 5 my-other-counter; )

Αυτό θα επαναφερθεί my-awesome-counterστο 5 και my-other-counterστην προεπιλεγμένη τιμή: 0.

Μπορείτε να δείτε τον κατάλογο αυτό ως: counter1 value1 counter2 value2 counter3 value3… . Εάν παραλειφθεί μια τιμή, είναι 0.

Διαδήλωση

Στην παρακάτω επίδειξη, articleεπαναφέρει την sectionαντίθετη τιμή στην προεπιλεγμένη τιμή της (0), η οποία στη συνέχεια αυξάνεται σε κάθε εμφάνιση ενότητας και, στη συνέχεια, εμφανίζεται μπροστά από τις επικεφαλίδες ενότητας.