Sådan nummereres elementer automatisk med CSS-tællere

CSS-tællere bruges til at føje optællinger til elementer. Tællingen tilføjes ved at tilvejebringe variabler, der kan initialiseres (ved hjælp af counter-reset), og disse variabler kan derefter forøges af CSS-regler.

Mange udviklere overser denne kraftfulde CSS-funktion, og det er derfor, vi vil gennemgå, hvordan man arbejder med tællere i denne vejledning.

Hvornår skal man bruge CSS-tællere

CSS-tællere kan bruges, når du har brug for et tællesystem på din webside. Nogle af de bedste brugstilfælde er:

  • Nummerering af komplekse lister
  • Opret dynamiske paginationslink
  • Nummereringstrin i et indbygget system.

I denne vejledning vil vi tale om, hvordan man bruger CSS-tællere til at lave komplekse lister og skabe dynamisk pagination .

Sådan bruges CSS-tællere

CSS optælling Systemet består af counter-reset, counter-increment, counter()og counters()og contentegenskaber. Disse egenskaber tager sig af alt hvad du skal gøre i CSS-tællesystemet.

Lad os se nærmere på disse egenskaber, så vi forstår, hvordan de kan bruges.

Forklarede tælleregenskaber

  • counter-reset: Bruges til at nulstille eller initialisere din tæller. For at bruge CSS-tællere skal du først oprette en med denne egenskab.
  • counter-increment: Bruges til at øge variablen til en allerede initialiseret tæller.
  • counter(): Denne funktion gør magien. Det bruges inde i indholdsejendommen på en :beforeeller :afterpseudovælger for at tilføje tællingerne.
  • counters(): Anvendes til arvet optælling, og genererer den forekomst af en forælder tæller variabel i barnet.
  • content: Bruges til at tilføje op optællingen værdi (strenge) ved at manipulere indhold til :beforeog :aftercss selektorer.

Nu hvor vi forstår disse CSS-tælleregenskaber og værdier, lad os dykke ned i vores eksempler.

Nummereringselementer på en webside

Nummerering kan udføres i HTML, men CSS-nummerering giver dynamiske og nemme at kontrollere måder at udføre jobbet ved hjælp af CSS-tællere. Det følgende eksempel nummererer elementerne på websiden med CSS.

For det første skal vi oprette nogle enkle nummereringer, der kun nummererer et niveau. Derefter går vi videre til et mere avanceret eksempel, hvor vi opretter en indholdsfortegnelse.

Enkel nummerering

I dette eksempel opretter vi en simpel genstandstæller med CSS. I din HTML skal du bare oprette din varestruktur som denne:

Mercury

Venus

Earth

I CSS skal vi gøre tre nøgle ting:

  1. Initialiser tælleren på den overordnede div ved hjælp af counter-reset
  2. Forøg tællerværdien med 1 på barnet div pved hjælp afcounter-increment
  3. Tilføj tællervariablerne før div pindholdet ved hjælp af :beforepseudovælgeren.

Lad os gå!

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. */ } 

Resultatet

Ovenstående nummerering blev udført med ren CSS. Interessant, ikke?

Nu skal vi implementere nogle mere komplekse nummereringer, der gør CSS-tællere værd at lære. Vi nummererer indlejrede elementer med counters()funktionen, som kan bruges til nedarvet optælling. Dette genererer forekomsten af ​​en overordnetæller i barnet.

Indholdsfortegnelse Nummerering


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

CSS ser sådan ud:

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 */ } 

Resultatet

Nu kan du se styrken af ​​indlejring tæller med counters(). Dette sparer dig besværet med forkert indlejring. For at hjælpe dig med at undgå fejl, arver det forældrenes modegenskaber og føjer barnets tæller til det.

Så nu hvor vi er gode med nummereringselementer, hvad næste?

At lave dynamisk paginering

At lave paginering med CSS-tællere er ret simpelt. Paginering udføres normalt med HTML, gentager det samme sæt af elementer og ændrer numrene indeni for at skabe navigation til hver side i et resultat.

En udvikler kan vælge at bruge noget dynamisk som at lave sløjfer, der genererer elementerne, eller gøre det fra serveren. Men i dag skal vi bruge CSS til at gøre dette dynamisk!

Hvordan? Med vores seniorfunktion counters().

På samme måde som vi har øget vores værdier til nummereringen ovenfor, kan vi også oprette en dynamisk paginationsliste med (du gættede det) CSS-tællere.

Lad os begynde:


    
  • <
  • >

Bemærk: Du behøver ikke tilføje tal inde i li, og du kan lave så mange, som du vil. Vores CSS counters()vil nummerere for os.

CSS ser sådan ud:

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); } 

Resultatet

Hvad mere kan du gøre med tællere? Lad mig høre dine ideer.

Tak!