Saat menggunakan cara biasa untuk menambahkan nomor bagian ke judul dengan menggunakan penghitung CSS, saya mengalami masalah saat menggunakan tag header.
Entah bagaimana tampaknya mengganggu counter(s)
body {
counter-reset: h1
}
h1 {
counter-reset: h2
}
h2 {
counter-reset: h3
}
h1:before {
counter-increment: h1;
content: counter(h1)". "
}
h2:before {
counter-increment: h2;
content: counter(h1)"." counter(h2)". "
}
h3:before {
counter-increment: h3;
content: counter(h1)"."counter(h2)"." counter(h3)". "
}<!DOCTYPE HTML>
<html>
<head>
<title>Headings counting</title>
</head>
<body>
<header>
<h1>First chapter</h1>
</header>
<h2>Sub Chapter</h2>
<h2>Sub Chapter</h2>
<h2>Sub Chapter</h2>
<h3>Sub sub section</h3>
</body>
</html>Keluarannya adalah:
- Bagian pertama
- 1.1. Sub Bab
- 1.1. Sub Bab
- 1.1. Sub Bab
- 1.0.1. Sub sub bagian
Setelah menghapus tag header output is as expected:
- Bab pertama
- 1.1. Sub Bab
- 1.2. Sub Bab
- 1.3. Sub Bab
- 1.3.1. Sub sub bagian
Haruskah penggunaan tag header di sekitar H1 menghasilkan ini atau tidak? Itu dilakukan di Firefox & Edge, bukan di Chrome & Opera
3
ingo
5 September 2016, 13:39
1 menjawab
Jawaban Terbaik
Cukup ganti/tambahkan header ke counter-reset dalam aturan deklarasi h1, tergantung apakah Anda akan memiliki h1 dengan atau tanpa tag header.
body {
counter-reset: h1
}
header { /* add h1 if you going to use h1 without header tag */
counter-reset: h2
}
h2 {
counter-reset: h3
}
h1:before {
counter-increment: h1;
content: counter(h1)". "
}
h2:before {
counter-increment: h2;
content: counter(h1)"." counter(h2)". "
}
h3:before {
counter-increment: h3;
content: counter(h1)"."counter(h2)"." counter(h3)". "
}<header>
<h1>First chapter</h1>
</header>
<h2>Sub Chapter</h2>
<h2>Sub Chapter</h2>
<h2>Sub Chapter</h2>
<h3>Sub sub section</h3>
2
dippas
5 September 2016, 13:48