Contra-resetare - CSS-Tricks

Anonim

counter-resetProprietatea permite numerotarea automată a elementelor. Ca o listă ordonată (

    ), dar funcționează pe orice element. Este deosebit de util în crearea unui cuprins sau a numerotării titlurilor pentru ceva de genul unei lucrări de teză. Contoare sunt aplicate prin intermediul proprietății de conținut. Un exemplu simplu: 
    article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

    counter-resetProprietatea este folosit pentru a reseta un contor CSS la o anumită valoare.

    Face parte din modulul contor CSS care face parte din conținutul generat, numerotarea automată și listează specificațiile CSS2.1, extinse în specificațiile CSS3 ale modulului de conținut generat și înlocuit.

    Sintaxă

    counter-reset: ( ?)+ | none

    Unde…

    • este numele contorului pe care doriți să îl resetați
    • este valoarea la care resetați contorul
    • none dezactivați contorul
    body ( counter-reset: my-awesome-counter 0; )

    Notă: valoarea implicită pentru întreg este 0. Dacă nu este setat niciun număr întreg după numele contorului, acesta va fi resetat la 0. Astfel, acest lucru funcționează așa cum era de așteptat:

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

    Puteți reseta mai multe contoare simultan cu o listă separată de spațiu, fiecare cu valoarea sa specifică, dacă doriți acest lucru.

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

    Aceasta se va reseta my-awesome-counterla 5 și my-other-counterla valoarea implicită: 0.

    Puteți vedea această listă ca: counter1 value1 counter2 value2 counter3 value3… . Dacă o valoare este omisă, este 0.

    Demo

    În următoarea demonstrație, se articleresetează sectioncontra valorii implicite (0), care este apoi incrementată la fiecare apariție a secțiunii, apoi afișată în fața titlurilor secțiunii.

    Verificați acest stilou!

    Mai multe informatii

    • contra-resetare în spec
    • contra-resetare la MDN

    Suport pentru browser

    Crom Safari Firefox Operă IE Android iOS
    2+ 3.1+ Orice 9.2+ 8+ Orice Orice