CSS-tællere er "variable" vedligeholdt af CSS, hvis værdier kan øges af CSS-regler (for at spore, hvor mange gange de bruges). Tællere giver dig mulighed for at justere udseendet af indhold baseret på dets placering i dokumentet.
CSS-tællere er som "variabler". Variableværdierne kan øges med CSS-regler (som vil spore, hvor mange gange de bruges).
For at arbejde med CSS-tællere vil vi bruge følgende egenskaber:
counter-reset- Opretter eller nulstiller en tæller
counter-increment- Øger en tællerværdi
content- Indsætter genereret indhold
counter() or counters() function- Tilføjer værdien af en tæller til et element
For at bruge en CSS-tæller skal den først oprettes med counter-reset.
Følgende eksempel opretter en tæller for siden (i brødtekstvælgeren), øger derefter tællerværdien for hvert <h2>-element og tilføjer "Sektion værdi af tælleren:" til begyndelsen af hvert <h2>-element:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Using CSS Counters</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>
</body>
</html>
Det følgende eksempel opretter en tæller for siden (sektionen) og en tæller for hvert <h1>-element (underafsnittet). "Sektion"-tælleren tælles for hvert <h1>-element med "Sektion værdi af sektionstælleren.", og "undersektion"-tælleren vil blive talt for hvert <h2>-element med "<værdien af sektionstælleren.værdien af undersektionstælleren":
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) " ";
} Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
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) " ";
}
</style>
</head>
<body>
<h1>HTML/CSS Tutorials</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Bootstrap</h2>
<h2>W3.CSS</h2>
<h1>Scripting Tutorials</h1>
<h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>React</h2>
<h1>Programming Tutorials</h1>
<h2>Python</h2>
<h2>Java</h2>
<h2>C++</h2>
</body>
</html>
En tæller kan også være nyttig til at lave skitserede lister, fordi en ny forekomst af en tæller oprettes automatisk i underordnede elementer. Her bruger vi counters() funktion til at indsætte en streng mellem forskellige niveauer af indlejrede tællere:
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
Bruges med ::before og ::after pseudo-elementerne til at indsætte genereret indhold
Øger en eller flere tællerværdier
Opretter eller nulstiller en eller flere tællere
Returnerer den aktuelle værdi af den navngivne tæller