Thuộc tính đặt lại ngược CSS
Thí dụ
Tạo một bộ đếm ("my-sec-counter") và tăng nó lên một bộ cho mỗi lần xuất hiện của bộ chọn <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc counter-reset
tính tạo hoặc đặt lại một hoặc nhiều bộ đếm CSS.
Thuộc counter-reset
tính này thường được sử dụng cùng với thuộc
tính tăng dần và thuộc tính
nội dung .
Giá trị mặc định: | không ai |
---|---|
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: | object .style.counterReset = "section" |
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-reset | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Cú pháp CSS
counter-reset: none|name number|initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
none | Default value. No counters will be reset |
id number | The id defines which counter to reset. The number sets the value the counter is reset 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 |
Các ví dụ khác
Thí dụ
Tạo một bộ đếm ("my-sec-counter") và giảm một bộ đếm cho mỗi lần xuất hiện của bộ chọn <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
Thí dụ
Đánh số các phần và tiểu mục với "Phần 1:", "1.1", "1.2", v.v.:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
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) " ";
}
Thí dụ
Tạo bộ đếm 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-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
Các trang liên quan
Tham chiếu CSS: :: trước phần tử giả
Tham chiếu CSS: :: sau phần tử giả
Tham chiếu CSS: thuộc tính nội dung
Tham chiếu CSS: thuộc tính counter-increment
Các hàm CSS: hàm counter ()
Tham chiếu DOM HTML: thuộc tính counterReset