Tetapan semula balas - Trik CSS

Tempat counter-resetpenginapan ini membolehkan penomboran unsur secara automatik. Seperti senarai yang dipesan (

article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

The counter-resetharta digunakan untuk menetapkan semula kaunter CSS kepada nilai yang diberikan.

Ia adalah bagian dari modul penghitung CSS yang merupakan bagian dari kandungan yang dihasilkan, penomboran automatik, dan menyenaraikan spesifikasi CSS2.1, yang diperluas dalam spesifikasi Modul Kandungan yang Dihasilkan dan Diganti.

Sintaks

counter-reset: ( ?)+ | none

Di mana ...

adalah nama kaunter yang ingin anda tetapkan semula
adalah nilai untuk menetapkan semula kaunter ke
none matikan kaunter

body ( counter-reset: my-awesome-counter 0; )

Catatan: nilai lalai untuk bilangan bulat adalah 0. Jika tidak ada bilangan bulat yang ditetapkan setelah nama pembilang, ia akan diset semula ke 0. Oleh itu, ini berfungsi seperti yang diharapkan:

body ( counter-reset: my-awesome-counter; )

Anda boleh menetapkan semula beberapa kaunter sekaligus dengan senarai yang dipisahkan ruang, masing-masing dengan nilai khusus jika anda mahu.

body ( counter-reset: my-awesome-counter 5 my-other-counter; )

Ini akan diset semula my-awesome-counterke 5 dan my-other-counterke nilai lalai: 0.

Anda boleh melihat senarai ini sebagai: counter1 value1 counter2 value2 counter3 value3… . Sekiranya nilai dihilangkan, itu adalah 0.

Demo

Dalam demo berikut, articletetapkan kembali sectionke nilai lalai (0), yang kemudiannya meningkat pada setiap kejadian bahagian, kemudian ditampilkan di depan tajuk bahagian.