A CSS-számlálók a CSS által karbantartott „változók”, amelyek értékei CSS-szabályokkal növelhetők (a használatuk számának nyomon követésére). A számlálók segítségével beállíthatja a tartalom megjelenését a dokumentumban való elhelyezése alapján.
A CSS-számlálók olyanok, mint a "változók". A változó értékei növelhetők CSS-szabályokkal (amelyek nyomon követik, hogy hányszor használják őket).
A CSS-számlálók használatához a következő tulajdonságokat fogjuk használni:
counter-reset- Számláló létrehozása vagy visszaállítása
counter-increment- Növeli a számláló értékét
content- Beszúrja a generált tartalmat
counter() or counters() function- Hozzáadja a számláló értékét egy elemhez
CSS-számláló használatához először létre kell hozni a számláló-reset segítségével.
A következő példa létrehoz egy számlálót az oldalhoz (a törzsválasztóban), majd növeli a számláló értékét minden <h2> elemhez, és hozzáadja a "Szakasz a számláló értéke értéket": minden <h2> elem elejére:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}Próbálja ki Ön is →
<!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>
A következő példa egy számlálót hoz létre az oldalhoz (szakaszhoz) és egy számlálót minden <h1> elemhez (alszakaszhoz). A "szakasz" számláló minden <h1> elemnél számolva lesz a "Section a szakasz számlálójának értéke". Az "alszakasz" számlálót pedig minden <h2> elemnél a "<"a szakaszszámláló értéke.az alszakaszszámláló értéke":
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óbálja ki Ön is →
<!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>
A számláló hasznos lehet vázolt listák készítéséhez is, mert egy új egy számláló példánya automatikusan létrejön a gyermekelemekben. Itt használjuk a counters() függvény karakterlánc beszúrásához a beágyazott különböző szintjei közé számlálók:
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} Próbálja ki Ön is →
<!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>
A ::before és ::after pszeudoelemekkel együtt használatos generált tartalom beszúrására
Egy vagy több számlálóértéket növel
Létrehoz vagy nulláz egy vagy több számlálót
A megnevezett számláló aktuális értékét adja vissza