Motåterställning - CSS-tricks

Den counter-resetegenskapen kan för automatisk numrering av element. Gilla en beställd lista (

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

Det counter-resetegenskapen används för att återställa en CSS mot ett givet värde.

Det är en del av CSS-räknemodulen som är en del av det genererade innehållet, den automatiska numreringen och listar CSS2.1-specifikationen, utökad i Generated and Replaced Content Module CSS3-specifikationen.

Syntax

counter-reset: ( ?)+ | none

Var…

är namnet på räknaren du vill återställa
är det värde som räknaren ska återställas till
none inaktivera räknaren

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

Obs: standardvärdet för heltalet är 0. Om inget heltal ställs in efter räknarens namn kommer det att återställas till 0. Således fungerar detta som förväntat:

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

Du kan återställa flera räknare samtidigt med en platsavgränsad lista, var och en med sitt specifika värde om du önskar det.

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

Detta återställs my-awesome-countertill 5 och my-other-countertill standardvärdet: 0.

Du kan se den här listan som: counter1 value1 counter2 value2 counter3 value3… . Om ett värde utelämnas är det 0.

Demo

I följande demo articleåterställs sectionmot sitt standardvärde (0), som sedan ökas vid varje sektions förekomst och sedan visas framför sektionsrubriker.