Bộ đếm trong CSS

Bộ đếm CSS là “các biến” duy trì bởi CSS có các giá trị có thể được tăng lên bởi các quy tắc CSS (để theo dõi số lần chúng được sử dụng). Bộ đếm cho phép bạn điều chỉnh sự xuất hiện của nội dung dựa trên vị trí của nó trong tài liệu.

Tự động đánh số với bộ đếm

Bộ đếm CSS giống như “các biến số”. 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 CSS chúng ta sẽ sử dụng các thuộc tính sau:

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

Để sử dụng bộ đếm CSS, đầu tiên nó phải được tạo với counter-reset. Ví dụ sau tạo ra một bộ đếm cho trang (trong vùng chọn phần thân), sau đó tăng giá trị đếm cho mỗi phần tử <h2> và thêm “Section <value of the counter>:” vào đầu mỗi phần tử <h2>:

body {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}

Bộ đếm lồng nhau

Ví dụ sau tạo ra một bộ đếm cho trang (vùng chọn) và một bộ đếm cho mỗi phần tử <h1> (vùng chọn nhỏ). Bộ đếm “section” sẽ được tính cho mỗi phần tử <h1> với “Section <value of the section counter>.”, và bộ đếm “subsection” sẽ được đếm cho mỗi phần tử <h2> với “<value of the section counter>.<value of the subsection counter>”:

body {
    counter-reset: section;
}

h1 {
    counter-reset: subsection;
}

h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}

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

ol {
    counter-reset: section;
    list-style-type: none;
}

li::before {
    counter-increment: section;
    content: counters(section,".") " ";
}

Thuộc tính bộ đếm