Bộ đếm CSS
pizza
bánh hamburger
Xúc xích
Bộ đếm CSS là "các biến" được duy trì bởi CSS có giá trị có thể tăng lên theo 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 giao diện của nội dung dựa trên vị trí của nó trong tài liệu.
Đánh số tự động bằng bộ đếm
Bộ đếm CSS giống như "biến". Các giá trị biến có thể được tăng lên theo 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 bộ đếm -
counter-increment
- Tăng giá trị bộ đếm -
content
- Chèn nội dung được tạo - Hàm
counter()
hoặccounters()
- 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 "Section < value of the counter >:" vào đầu mỗi phần tử <h2>:
Ví dụ
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Hãy tự mình thử » Bộ đếm lồng nhau
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> (phần phụ). Bộ đếm "phần" sẽ được tính cho mỗi phần tử <h1> có "Phần < giá trị của bộ đếm phần >." và bộ đếm "phần phụ" sẽ được tính cho từng 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ụ
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) " ";
}
Hãy tự mình thử » Bộ đếm cũng có thể hữu ích để tạo danh sách phác thảo vì một phiên bản mới của bộ đếm được tạo tự động trong các phần tử con. Ở đây chúng ta 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 bộ đếm lồng nhau:
Ví dụ
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
Hãy tự mình thử »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 |