Kuidas elemente automaatselt CSS-loenduritega nummerdada

CSS-loendureid kasutatakse elementide arvu lisamiseks. Loend lisatakse muutujate esitamise abil, mida saab initsialiseerida (kasutades counter-reset), ja neid muutujaid saab seejärel CSS-reeglite abil suurendada.

Paljud arendajad jätavad selle võimsa CSS-i funktsiooni tähelepanuta ja seetõttu uurime selles õpetuses, kuidas loenduritega töötada.

Millal CSS-loendureid kasutada

CSS-loendureid saab kasutada alati, kui vajate oma veebisaidil loendussüsteemi. Mõned parimad kasutusjuhtumid on:

  • Numbrikomplekside loendid
  • Looge dünaamilised lehekülgede lingid
  • Numeratsiooniastmed rongisiseses süsteemis.

Selles õpetuses räägime sellest, kuidas CSS-loendureid kasutada keerukate loendite koostamiseks ja dünaamilise lehitsemise loomiseks .

Kuidas CSS-loendureid kasutada

CSS loendamise süsteemi koosneb counter-reset, counter-increment, counter()ja counters()ja contentomadused. Need omadused hoolitsevad kõige eest, mida peate CSS-i loendussüsteemis tegema.

Vaatame neid omadusi lähemalt, et saaksime aru, kuidas neid saab kasutada.

Loenduri atribuudid on selgitatud

  • counter-reset: Kasutatakse loenduri lähtestamiseks või lähtestamiseks . CSS-loendurite kasutamiseks peate kõigepealt selle atribuudiga selle looma.
  • counter-increment: Kasutatakse juurdekasvu muutuja juba lähtestatud counter.
  • counter(): See funktsioon võlub. Seda kasutatakse sees sisu vara kohta :beforevõi :afterpseudo valijat, et lisada kuni loendused.
  • counters(): Kasutatakse päritud loendamiseks ja genereerib lapses vanemloenduri muutuja eksemplari .
  • content: Kasutatakse küündivad count raha (stringid) manipuleerides sisu :beforeja :aftercss valijad.

Nüüd, kui me mõistame neid CSS-i loenduri omadusi ja väärtusi, uurime oma näiteid.

Elementide nummerdamine veebilehel

Numeratsiooni saab teha HTML-is, kuid CSS-i nummerdus pakub dünaamilisi ja hõlpsasti juhitavaid viise, kuidas tööd CSS-loendurite abil teha. Järgmine näide nummerdab CSS-iga veebisaidi elemendid.

Kõigepealt seadistame mõne lihtsa numeratsiooni, mis teeb ainult ühetasandilise numeratsiooni. Seejärel liigume täpsema näite juurde, kus paneme paika sisukorra.

Lihtne numeratsioon

Selles näites loome CSS-iga lihtsa üksuste loenduri. Looge HTML-is lihtsalt üksuste struktuur järgmiselt:

Mercury

Venus

Earth

CSS-is teeme kolm peamist asja:

  1. Initsialiseerige vanemdivi loendur counter-reset
  2. Juurdekasvu counter väärtuse 1 lapse div pkasutadescounter-increment
  3. Lisage pseudovalija div pabil loendurimuutujad enne sisu :before.

Lähme!

div { list-style-type: none; counter-reset: css-counter 0; /* initializes counter to 0; use -1 for zero-based numbering */ } div p { counter-increment: css-counter 1; /* Increase the counter by 1. */ } div p:before { content: counter(css-counter) ". "; /* Apply counter before children's content. */ } 

Tulemus

Ülaltoodud numeratsioon tehti puhta CSS-iga. Huvitav, eks?

Nüüd rakendame keerukamat numeratsiooni, mis muudab CSS-loendurid õppimist väärt. Nummerdame counters()funktsiooniga pesastatud elemendid , mida saab kasutada päritud loendamiseks. See genereerib lapses vanemloenduri eksemplari.

Sisukorra nummerdamine


    
  • Web Development
    • HTML
    • CSS
      • CSS Introduction
      • CSS Selectors
      • CSS Animation
    • JavaScript
  • Graphics Design
  • Computer Education

CSS näeb välja selline:

ul { list-style-type: none; counter-reset: css-counters 0; /* intializes counter, set -1 for zero-based counters */ } ul li:before { counter-increment: css-counters; content: counters(css-counters, ".") " "; /* generates inherited counters from parents */ } 

Tulemus

Nüüd näete pesitsusarvude jõudu counters(). See säästab ebaõigesti pesitsemise vaeva. Vigade vältimiseks pärib see vanemate vastased omadused ja lisab sellele lapse loenduri.

Mis nüüd siis, kui nummerduselementidega on meil hästi, mis edasi?

Dünaamilise lehitsemise tegemine

CSS-loenduritega lehitsemine on üsna lihtne. Lehekülgede otsimine toimub tavaliselt HTML-iga, korrates sama elementide kogumit ja muutes sees olevaid numbreid, et luua navigeerimine tulemuse igale lehele.

Arendaja võib kasutada midagi dünaamilist, näiteks teha elemente genereerivaid silmuseid või teha seda serverist. Kuid täna kasutame selleks dünaamiliselt CSS-i!

Kuidas? Meie kõrgema counters()funktsiooniga.

Samamoodi, nagu oleme ülaltoodud numeratsiooni jaoks oma väärtusi suurendanud, saame ka (arvate) CSS-loenduritega koostada dünaamilise lehekülgede loendi.

Alustame:


    
  • <
  • >

Märkus. Teil pole vaja numbreid lisada lija saate teha nii palju kui soovite. Meie CSS counters()teeb meie jaoks numeratsiooni.

CSS näeb välja selline:

ul { list-style-type: none; counter-reset: paginate-counter 0; } ul li { border: solid 3px #ccc; color: #36f; border: 5px; float: left; margin: 5px; padding: 8px 10px; font-size: 14px; cursor: pointer; text-align: center; } /* Setting styles for the inner text */ ul li:not(.previous):not(.next):before { counter-increment: paginate-counter; content: counter(paginate-counter); } 

Tulemus

Mida saab veel lettidega teha? Las ma kuulen teie ideid.

Aitäh!