Properti penyetelan ulang CSS
Contoh
Buat penghitung ("penghitung detik saya") dan tingkatkan satu untuk setiap kemunculan pemilih <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti counter-reset
membuat atau mengatur ulang satu atau lebih penghitung CSS.
Properti counter-reset
ini biasanya digunakan bersama dengan properti
counter-increment dan properti
konten .
Nilai bawaan: | tidak ada |
---|---|
Diwarisi: | tidak |
Animasi: | tidak. Baca tentang animasi |
Versi: kapan: | CSS2 |
Sintaks JavaScript: | objek .style.counterReset="bagian" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
counter-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Sintaks CSS
counter-reset: none|name number|initial|inherit;
Nilai properti
Value | Description |
---|---|
none | Default value. No counters will be reset |
id number | The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Lebih Banyak Contoh
Contoh
Buat penghitung ("penghitung detik saya") dan kurangi satu untuk setiap kemunculan pemilih <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
Contoh
Penomoran bagian dan sub-bagian dengan "Bagian 1:", "1.1", "1.2", dll.:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Contoh
Buat penghitung dan tambah satu (menggunakan angka Romawi) untuk setiap kemunculan pemilih <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
Halaman Terkait
Referensi CSS: ::sebelum elemen semu
Referensi CSS: ::setelah elemen semu
Referensi CSS: properti konten
Referensi CSS: properti counter-increment
Fungsi CSS: fungsi penghitung ()
Referensi DOM HTML: properti counterReset