CSS -tellers
pizza
Hamburger
Warmbrakke
CSS-tellers is "veranderlikes" wat deur CSS onderhou word, waarvan die waardes deur CSS-reëls verhoog kan word (om na te spoor hoeveel keer hulle gebruik word). Met tellers kan jy die voorkoms van inhoud aanpas op grond van die plasing daarvan in die dokument.
Outomatiese nommering met tellers
CSS tellers is soos "veranderlikes". Die veranderlike waardes kan verhoog word deur CSS-reëls (wat sal naspoor hoeveel keer hulle gebruik word).
Om met CSS-tellers te werk, sal ons die volgende eienskappe gebruik:
counter-reset- Skep of stel 'n teller terugcounter-increment- Verhoog 'n tellerwaardecontent- Voeg gegenereerde inhoud incounter()ofcounters()funksie - Voeg die waarde van 'n teller by 'n element
Om 'n CSS-teller te gebruik, moet dit eers geskep word met counter-reset.
Die volgende voorbeeld skep 'n teller vir die bladsy (in die liggaamskeurder), verhoog dan die tellerwaarde vir elke <h2>-element en voeg "Afdeling < waarde van die teller >:" by die begin van elke <h2>-element:
Voorbeeld
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Nestende tellers
Die volgende voorbeeld skep een teller vir die bladsy (afdeling) en een teller vir elke <h1>-element (onderafdeling). Die "afdeling"-teller sal getel word vir elke <h1>-element met "Seksie < waarde van die seksieteller >.", en die "onderafdeling"-teller sal getel word vir elke <h2>-element met "< waarde van die afdelingteller >.< waarde van die subafdeling teller >":
Voorbeeld
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment:
section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content:
counter(section) "." counter(subsection) " ";
}
'n Teller kan ook nuttig wees om uiteenlopende lyste te maak omdat 'n nuwe instansie van 'n teller outomaties in kinderelemente geskep word. Hier gebruik ons die
counters()funksie om 'n string tussen verskillende vlakke van geneste tellers in te voeg:
Voorbeeld
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
CSS-toonbankeienskappe
| Property | Description |
|---|---|
| content | Used with the ::before and ::after pseudo-elements, to insert generated content |
| counter-increment | Increments one or more counter values |
| counter-reset | Creates or resets one or more counters |
| counter() | Returns the current value of the named counter |