Automatic Numbering với Counters
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 CSS Counter, 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ộ đếmcounter-increment- Tăng giá trị bộ đếmcontent- Chèn nội dung đã tạocounter()hoặccounters()function - Thêm giá trị của bộ đếm vào một element
Để sử dụng CSS counter, trước tiên nó phải được tạo với counter-reset.
Ví dụ sau tạo bộ đếm cho trang (trong body selector), sau đó tăng giá trị bộ đếm cho mỗi element <h2> và thêm "Phần <giá trị của bộ đếm>:" vào đầu mỗi element <h2>:
body { counter-reset: section; } h2::before { counter-increment: section; content: "Phần" counter(section) ": "; }
Nesting Counters
Ví dụ sau tạo một counter cho trang (section) và một counter cho mỗi element <h1> (subsection). Counter "section" sẽ được tính cho mỗi element <h1> với "Phần <giá trị của counter section>." Và counter "subsection" sẽ được tính cho mỗi element <h2> với "<giá trị của bộ đếm phần >. <giá trị của counter subsection> ":
body { counter-reset: section; } h1 { counter-reset: subsection; } h1::before { counter-increment: section; content: "Phần " counter(section) ". "; } h2::before { counter-increment: subsection; content: counter(section) "." counter(subsection) " "; }Một counter cũng có thể hữu ích để tạo list bởi vì một phiên bản mới của counter được tự động tạo trong các element 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 các counter lồng nhau:
ol { counter-reset: section; list-style-type: none; } li::before { counter-increment: section; content: counters(section,".") " "; }