Thuộc tính bộ đếm CSS
Ví dụ
Tạo một bộ đếm ("my-counter"), đặt nó thành 5 và tăng nó lên một cho mỗi lần xuất hiện của bộ chọn <h2>:
body {
/* Set "my-counter" to 5 */
counter-set: my-counter 5;
}
h2::before {
/* Increment "my-counter" by 1 */
counter-increment:
my-counter;
content: "Section "
counter(my-counter) ". ";
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính counter-set
tạo và đặt bộ đếm CSS thành một giá trị cụ thể.
Thuộc tính counter-set
thường được sử dụng cùng với thuộc tính counter-increment và thuộc tính content .
Giá trị mặc định: | không có |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS2 |
Cú pháp JavaScript: | đối tượng .style.counterSet="4" Hãy thử nó |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
counter-set | 85.0 | 85.0 | 68.0 | Not supported | 71.0 |
Cú pháp CSS
counter-set: none| counter-name number |initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
none | Default value. No counter set is to be performed |
counter-name number | The name of the counter to set and the value to set the counter to on each occurrence of the selector. The default number value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Tạo một bộ đếm ("my-counter"), đặt thành 5 và giảm một cho mỗi lần xuất hiện của bộ chọn <h2>:
body {
/* Set "my-counter" to 5 */
counter-set: my-counter 5;
}
h2::before {
/* Decrement "my-counter" by 1 */
counter-increment:
my-counter -1;
content: "Section "
counter(my-counter) ". ";
}
Hãy tự mình thử »Ví dụ
Đánh số các phần, các phần phụ bằng “Section 10:”, “10.1”, “10.2”, v.v.:
body
{
/* Set "section" to 9 */
counter-set: section 9;
}
h1
{
/* Set "subsection" to 0 */
counter-set: subsection 0;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Hãy tự mình thử »Ví dụ
Tạo một bộ đếm, đặt thành 9 và tăng nó lên một (sử dụng chữ số La Mã) cho mỗi lần xuất hiện của bộ chọn <h2>:
body {
/* Set "my-counter" to 9 */
counter-set: my-counter 9;
}
h2::before {
/* Increment "my-counter" by 1 */
counter-increment:
my-counter;
content: counter(my-counter,
upper-roman) ". ";
}
Hãy tự mình thử »Trang liên quan
Tham chiếu CSS: :: trước phần tử giả
Tham chiếu CSS: ::after phần tử giả
Tham chiếu CSS: thuộc tính nội dung
Tham khảo CSS: thuộc tính tăng ngược
Hàm CSS: hàm counter()