Elemen pseudo pada CSS sebenarnya sangat mudah digunakan, namun seringkali diabaikan oleh semua orang. Banyak orang saat ini mungkin hanya mengira bahwa nilai atribut content yang biasa digunakan pada elemen pseudo hanya mendukung string atribut konten lainnya yang umum digunakan. Ada juga uri dan counter.
Penghitung di CSS mirip dengan variabel, mereka dapat mengimplementasikan fungsi penghitungan sederhana dan menampilkan hasilnya di halaman. Mereka banyak digunakan di situs web awal. Untuk mengimplementasikan penghitung, Anda perlu menggunakan atribut berikut:
Mari kita lihat bagaimana penghitung digunakan dalam CSS.
1. Gunakan penghitung untuk penomoran otomatis
CSS menghitung kenaikan variabel sesuai aturan.
Penghitung CSS menggunakan properti berikut:
(1) counter-reset: nama1 nama2 membuat atau menyetel ulang penghitung (beberapa penghitung dapat ditentukan secara bersamaan, dipisahkan dengan spasi)
(2) kenaikan tandingan: variabel kenaikan langkah nama (dapat menambah satu atau lebih)
(3) content:counter(name) menyisipkan konten yang dihasilkan (menggunakan elemen semu sebelum/sesudah)
(4) Fungsi counter() atau counters() menambahkan nilai counter ke elemen
Saat membuat penghitung, penghitung harus dibuat di tag sebelumnya atau tag induk dari tag. Jika ditentukan dalam tagnya sendiri, maka tidak valid.
Aplikasi khusus:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Pemrograman Dotcpp</title><style>div{counter-reset:counter1;}h2{counter-reset:counter2;}h2:: sebelum{/*Tetapkan ukuran langkah terlebih dahulu*/counter-increment:counter11;content:'th'counter(count er1)'section';}p::before{/*Setel ukuran langkah terlebih dahulu*/counter-increment:counter21;content:'The 'counter(counter1)' section';}</style></he iklan><tubuh><div><h2></h2><p></p><p></p><p></p><h2></h2><p></p> <p></p><p></p><p></p></div></body></html>Hasil berjalan:
2. Inisialisasi penghitung
Untuk menggunakan penghitung, pertama-tama Anda harus menggunakan atribut counter-reset untuk membuat penghitung. Proses ini disebut menginisialisasi penghitung. Format sintaksis atribut counter-reset adalah sebagai berikut:
counter-reset: tidak ada|[<identifier><integer>]
Deskripsi parameternya adalah sebagai berikut:
(1) tidak ada: Mencegah penyetelan ulang penghitung;
(2) <identifier>: Tentukan nama penghitung;
(3) <integer>: Tentukan nilai awal penghitung. Nilai defaultnya adalah 0 dan dapat berupa nilai negatif.
3. Penghitung meningkat secara otomatis
Setelah menginisialisasi penghitung, Anda dapat menggunakan atribut penghitung kenaikan untuk menentukan kapan penghitung akan bertambah. Sintaksnya adalah sebagai berikut:
kenaikan tandingan: tidak ada|[<identifier><integer>]
Deskripsi parameternya adalah sebagai berikut:
(1) tidak ada: mencegah peningkatan penghitung;
(2) <identifier>: Tentukan nama penghitung yang akan ditambah;
(3) <integer>: Tentukan nilai penghitung yang bertambah setiap kali. Nilai defaultnya adalah 1 dan dapat berupa nilai negatif.
4. Tampilan penghitung
Terakhir, ada cara menampilkan counter. Untuk menampilkan counter dapat menggunakan fungsi counter() atau counters() Sintaks kedua fungsi tersebut adalah sebagai berikut:
counter(nama)counter(nama,string,tipe gaya daftar)
Deskripsi parameternya adalah sebagai berikut:
(1) nama: nama loket;
(2) string: string yang digunakan untuk penyambungan ketika penghitung digunakan bersarang;
(3) tipe gaya daftar: Gaya yang ditampilkan oleh penghitung dapat berupa nilai apa pun dari "atribut tipe gaya daftar" yang diizinkan di CSS.
Berikut ini contoh sederhana untuk mendemonstrasikan penggunaan counter:
<!DOCTYPEhtml><html><head><style>body{counter-reset:chapter;}h5,h6{margin:5px05px;}h5{counter-reset:section;counter-inrice:chapter;}h6{counter- kenaikan:bagian;}h5:sebelum{konten:Penghitung Bab(bab).; }h6:before{content:counter(chapter).counter(section);</style></head><body><h5>Bab 1</h5><h6>Bagian 1</h6>< h6> TIDAK. Bagian 2</h6><h6>Bagian 3</h6><h6>Bagian 4</h6><h5>Bab 2</h5><h6>Bagian 1</h6><h6>Bab Bagian 2</ h6><h6>Bagian 3</h6><h6>Bagian 4</h6></body></html>Hasil berjalan:
5. Kontra bersarang
Selain itu, penghitung juga dapat disarangkan, dan fungsi counters() dapat digunakan untuk menyisipkan string di antara penghitung yang disarangkan pada tingkat yang berbeda, seperti yang ditunjukkan dalam contoh berikut:
<!DOCTYPEhtml><html><head><style>ol{/*Buat instance penghitung baru untuk setiap elemen ol*/counter-reset:ol-list;list-style-type:none;}li:before{ / *Meningkatkan hanya instance penghitung saat ini*/counter-increment:ol-list;/*Meningkatkan nilai yang dipisahkan oleh "." untuk semua instance penghitung*/content:counters(ol-list,.),;} < /style></head><body><ol><li>Volume</li><li>Bab<ol><li>Bagian</li><li>Bagian</li><li>Bagian<ol ><li>Bagian</li><li>Bagian</li></ol></l i><li>Bagian<ol><li>Subbagian</li><li>Subbagian</li><li>Subbagian</li></ol></li></ol></li>< li>Bab</li><li>Bab</li></ol></body></html>Hasil berjalan:
