Számláló visszaállítása - CSS-trükkök

A counter-resettulajdonság lehetővé teszi az elemek automatikus számozását. Mint egy rendezett lista (

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

A counter-resettulajdonság a CSS számláló visszaállítására szolgál egy adott értékre.

Ez része a CSS számláló modulnak, amely része a létrehozott tartalomnak, az automatikus számozásnak, és felsorolja a CSS2.1 specifikációkat, kiterjesztve a Generált és Cserélt Tartalom Modul CSS3 specifikációival.

Szintaxis

counter-reset: ( ?)+ | none

Hol…

a visszaállítani kívánt számláló neve
az az érték, amelyre vissza kell állítani a számlálót
none tiltsa le a számlálót

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

Megjegyzés: Az egész szám alapértelmezett értéke 0. Ha a számláló neve után nincs beállítva egész szám, akkor az nullára lesz állítva.

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

Szóközzel elválasztott listával egyszerre több számlálót is visszaállíthat, mindegyiket a saját értékével, ha szeretné.

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

Ez visszaáll my-awesome-counter5-re és my-other-counteraz alapértelmezett értékre: 0.

Láthatjuk ezt a listát: counter1 value1 counter2 value2 counter3 value3… . Ha egy érték elmarad, akkor 0.

Demó

A következő bemutatóban articlevisszaállítja sectionaz alapértelmezett értékét (0), amelyet aztán minden szakasz előfordulásakor növekszik, majd a szakasz címsorai előtt megjelenít.