Biến đếm trong CSS - CSS Counters

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ộ đếm
• counter-increment - Tăng giá trị bộ đếm
• content - Chèn nội dung đã tạo
• counter() hoặc counters() 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,".") " ";  }