Thuộc tính tăng đối số 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-increment
tính tăng hoặc giảm giá trị của một hoặc nhiều bộ đếm CSS.
Thuộc counter-increment
tính thường được sử dụng cùng với thuộc
tính đặt lại ngược 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.counterIncrement = "subsection"; |
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-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Cú pháp CSS
counter-increment: none|id|initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial 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-reset
Các hàm CSS: hàm counter ()
Tham chiếu DOM HTML: thuộc tính counterIncrement