CSS-räknare är "variabler" som underhålls av CSS vars värden kan ökas med CSS-regler (för att spåra hur många gånger de används). Med räknare kan du justera innehållets utseende baserat på dess placering i dokumentet.
CSS-räknare är som "variabler". Variabelvärdena kan ökas med CSS-regler (som spårar hur många gånger de används).
För att arbeta med CSS-räknare kommer vi att använda följande egenskaper:
counter-reset
- Skapar eller återställer en räknare
counter-increment
- Ökar ett räknarvärde
content
- Infogar genererat innehåll
counter()
or counters()
function- Lägger till värdet av en räknare till ett element
För att använda en CSS-räknare måste den först skapas med räknare-återställning
.
Följande exempel skapar en räknare för sidan (i kroppsväljaren), ökar sedan räknarvärdet för varje <h2>-element och lägger till "Sektions värde för räknaren:" till början av varje <h2>-element:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Prova själv →
<!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>
Följande exempel skapar en räknare för sidan (sektionen) och en räknare för varje <h1>-element (undersektion). "Sektions"-räknaren kommer att räknas för varje <h1>-element med "Sektions värde av sektionsräknaren.", och "undersektion"-räknaren kommer att räknas för varje <h2>-element med "<värde på sektionsräknaren.värde på undersektionsräknaren":
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) " ";
}
Prova själv →
<!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 räknare kan också vara användbar för att göra konturlistor eftersom en ny instans av en räknare skapas automatiskt i underordnade element. Här använder vi counters()
funktion för att infoga en sträng mellan olika nivåer av kapslade räknare:
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
Prova själv →
<!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>
Används med ::before och ::after pseudo-elementen, för att infoga genererat innehåll
Ökar ett eller flera räknarvärden
Skapar eller återställer en eller flera räknare
Returnerar det aktuella värdet för den namngivna räknaren