Thuộc tính tăng ngược CSS
Ví dụ
Tạo một bộ đếm ("my-sec-counter") 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-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) ". ";
}
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-increment
tăng hoặc giảm giá trị của một hoặc nhiều bộ đếm CSS.
Thuộc tính counter-increment
thường được sử dụng cùng với thuộc tính counter-reset 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.counterIncrement = "tiểu mục"; 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-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 |
Thêm ví dụ
Ví dụ
Tạo một bộ đếm ("my-sec-counter") và giảm nó đi một 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) ". ";
}
Hãy tự mình thử »Ví dụ
Đánh số các phần, các phần phụ bằng “Section 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) " ";
}
Hãy tự mình thử »Ví dụ
Tạo một 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) ". ";
}
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 chiếu CSS: thuộc tính counter-reset
Hàm CSS: hàm counter()
Tham chiếu DOM HTML: thuộc tính counterIncrement