Set kaunter - Trik CSS

Isi kandungan:

Anonim

Harta counter-setCSS, sesuai dengan namanya, menetapkan nilai permulaan untuk pembilang CSS. Anda tahu bagaimana senarai yang dipesan bermula dari 1 dan kemudian naik dari sana? Properti counter-setini membolehkan kita menetapkan nilai permulaan kepada sesuatu yang lain, katakanlah, -1. Atau 2. Atau 200! Kecuali itu digunakan untuk kaunter CSS dan bukannya senarai yang dipesan.

Oleh itu, katakan bahawa kita mempunyai kaunter khusus untuk senarai bab buku, di mana nombor bab disusun dengan nama bab.

Kita mulakan dengan menentukan kaunter dengan counter-resetharta tanah. Kami akan memanggilnya chapterdan menentukan ia pada kelas bekas ibu bapa untuk bab-bab yang dikenali sebagai, kreatif, .chapters.

.chapters ( counter-reset: chapter; )

Seterusnya, kami akan menetapkan chapterkaunter ke elemen menggunakan counter-incrementsifat. Oleh kerana ini adalah bab buku, kami akan menggunakannya

unsur, dengan andaian tajuk buku akan menjadi

. Perhatikan bahawa kita benar-benar memberikannya ke :beforeelemen semu kerana ia memungkinkan kita untuk mempersiapkan penghitung kita kepada yang sebenarnya

unsur. 
h2:before ( counter-increment: chapter; )

Hebat, perkara terakhir yang kita perlukan adalah memberitahu kaunter apa yang seharusnya dipaparkan. Itu dilakukan pada contentharta melalui counter()fungsi. Kami akan melemparkan sedikit warna di kaunter juga kerana reka bentuk memerlukannya.

h2:before ( color: red; content: "Chapter " counter(chapter) ": "; counter-increment: chapter; )

Hei, kami kelihatan baik!

Tapi tunggu! Saya tidak benar-benar menggali fakta bahawa kita mulai pada Bab 1. Maksud saya, "Maju" sebenarnya bukan bab. Sekiranya ada, ia seperti Bab 0.

Di situlah counter-setmasuk! Mari kita mulakan perkara pada sifar:

h2:first-of-type::before ( counter-set: chapter; )

Di sana kita pergi! Itu lebih baik. Hanya dengan menetapkan nilai harta tanah ke nama kaunter, kita telah menetapkan senarai bab untuk dimulakan pada Bab 0. Kita dapat dengan mudah menetapkannya mulai dari yang lain, seperti bab 100.

Dan jika penyemak imbas tidak menyokong counter-set? Tiada apa apa sebenarnya. Ia hanya akan diabaikan dan senarai akan dimulakan secara default 1.

Sintaks

( ? )+ | none

Ini pada dasarnya adalah cara yang menarik untuk mengatakan bahawa harta tanah mengambil nama kaunter khas ( ) dan nilai permulaan ( ). Atau menetapkan ia untuk nonedan penomboran akan bermula pada lalai titik permulaan, 1.

  • Nilai awal: none
  • Berlaku untuk: semua elemen (termasuk yang bukan visual)
  • Diwarisi: tidak
  • Jenis animasi: mengikut jenis nilai yang dikira

Nilai

/* Set "awesome-counter" to 0 */ counter-set: awesome-counter; /* Set "awesome-counter" to -10 */ counter-set: awesome-counter -10; /* Set "awesome1" to 0, and "awesome2" to 2 */ counter-set: awesome1 awesome2 2; /* Wipe out any other settings that may have been declared elsewhere */ counter-set: none; /* Global values */ counter-set: inherit; counter-set: initial; counter-set: unset;

Perhatikan bahawa counter-setakan membuat pembilang baru jika nama kaunter yang dinyatakan di atasnya belum ditentukan di tempat lain.

Sokongan penyemak imbas

IE Hujung Firefox Chrome Safari Opera
Tidak Tidak 68+ Tidak Tidak Tidak
Android Chrome Android Firefox Penyemak Imbas Android Safari iOS Opera Mini
Tidak 79+ Tidak Tidak Tidak
Sumber: caniuse

Bacaan lanjut

  • Spesifikasi Modul Senarai CSS Tahap 3 (Draf Kerja)
  • Memaparkan Langkah Semasa dengan Pembilang CSS
  • Mengira Dengan Pembilang dan Grid CSS
  • Cara Membalikkan Pembilang Khusus CSS