Bộ đếm CSS
pizza
bánh hamburger
Xúc xích
Bộ đếm CSS là "biến" được duy trì bởi CSS mà giá trị của nó 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 hình thức của nội dung dựa trên vị trí của nó trong tài liệu.
Đá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 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ộ đếmcounter-increment- Tăng giá trị bộ đếmcontent- Chèn nội dung được tạocounter()hoặccounters()hàm - 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ụ sau tạo bộ đếm cho trang (trong bộ chọn nội dung), sau đó tăng giá trị bộ đếm cho từng phần tử <h2> và thêm "Phần < giá trị của bộ đếm >:" vào đầu mỗi phần tử <h2>:
Thí dụ
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Quầy làm tổ
Ví dụ sau tạo một bộ đếm cho trang (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 > ":
Thí dụ
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ũ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
counters()hàm để chèn một chuỗi giữa các cấp khác nhau của bộ đếm lồng nhau:
Thí dụ
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
Thuộc tính bộ đếm CSS
| Property | Description |
|---|---|
| content | Used with the ::before and ::after pseudo-elements, to insert generated content |
| counter-increment | Increments one or more counter values |
| counter-reset | Creates or resets one or more counters |
| counter() | Returns the current value of the named counter |