1. Dánh số tự động với bộ đếm

Bộ đếm CSS giống như “biến”. Các giá trị biến có thể được tăng lên bởi các quy tắc CSS (sẽ theo dõi số lần chúng được sử dụng)

Để làm việc với bộ đếm trong CSS, chúng tôi sẽ sử dụng các thuộc tính sau:

• counter-reset – Tạo hoặc đặt lại bộ đếm
• counter-increment – Tăng giá trị bộ đếm
• content – Chèn nội dung được tạo
• counter()hoặc counters() – Thêm giá trị của bộ đếm vào một phần tử

Để sử dụng bộ đếm CSS, trước tiên nó phải được tạo bằng counter-reset

Ví dụ:

2. Dánh số theo từng phần

Dưới đây tạo một bộ đếm cho các phần và một bộ đếm cho mỗi phần tử <h1> (tiểu mục). Bộ đếm “phần” sẽ được đếm cho mỗi phần tử <h1> với “Phần < giá trị của bộ đếm phần >.”, Và bộ đếm “tiểu mục” sẽ được tính cho mỗi phần tử <h2> có “< giá trị của bộ đếm phần >. < giá trị của bộ đếm tiểu mục > ”

Ví dụ:

Một bộ đếm cũng có thể hữu ích để tạo danh sách được phác thảo bởi vì một phiên bản mới của bộ đếm được tự động tạo trong các phần tử con. Ở đây chúng tôi sử dụng hàm counters() để chèn một chuỗi giữa các cấp khác nhau của bộ đếm lồng nhau

Ví dụ: