Utilizarea a Două Contoare CSS
Fiecare nivel de numerotare poate avea propriul contor. Mai jos, pagina primește un contor (numit „section”), iar fiecare element <h1> primește altul (numit „subsection”).
Exemplu
Prompt
Creați o pagină cu contoare CSS care folosește două contoare: unul numit „section” resetat pe body și unul numit „subsection” resetat la fiecare h1. Folosiți pseudo-elemente ::before pentru a antepune „Section X.” înaintea titlurilor h1 și „X.Y” înaintea titlurilor h2. Includeți mai multe elemente h1 și h2 pentru a demonstra numerotarea.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Two Counters</title>
<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 Tutorial</h1>
<h2>HTML Introduction</h2>
<h2>HTML Editors</h2>
<h2>HTML Basic</h2>
<h1>CSS Tutorial</h1>
<h2>CSS Introduction</h2>
<h2>CSS Syntax</h2>
<h2>CSS Selectors</h2>
<h1>JavaScript Tutorial</h1>
<h2>JavaScript Introduction</h2>
<h2>JavaScript Variables</h2>
</body>
</html>
Funcția CSS counters()
Contoarele imbricate cu același nume pot fi citite dintr-o dată: funcția counters() returnează valorile lor curente sub formă de șir de caractere.
Aceeași funcție îți permite să pui și un șir între diferitele niveluri.
Exemplu
Prompt
Creați o pagină cu liste ordonate imbricate în care list-style-type este setat la none. Folosiți un contor CSS numit „section” care se resetează la fiecare ol, se incrementează la fiecare li și folosește funcția counters() cu un separator „.” în content-ul li::before pentru a afișa numerotarea imbricată precum „1”, „1.1”, „1.1.1”.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS counters() Function</title>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section, ".") " ";
}
</style>
</head>
<body>
<ol>
<li>Item
<ol>
<li>Item
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
</li>
<li>Item</li>
<li>Item</li>
</ol>
</li>
<li>Item
<ol>
<li>Item</li>
<li>Item</li>
</ol>
</li>
<li>Item</li>
</ol>
</body>
</html>
Proprietăți Contor CSS
Aceste proprietăți și funcții CSS lucrează cu contoarele:
- content - Inserează conținut generat, împreună cu pseudo-elementele
::beforeși::after. - counter-increment - Crește valoarea unuia sau mai multor contoare.
- counter-reset - Creează sau resetează unul sau mai multe contoare.
- counter() - Returnează valoarea curentă a contorului numit.
- counters() - Returnează valorile curente ale contoarelor numite și imbricate.