counter-increment

Try it

counter-increment: example-counter;

counter-increment: example-counter 0;

counter-increment: example-counter 5;

counter-increment: example-counter -5;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Counter value:</div>
</section>

#default-example {
  text-align: left;
  counter-reset: example-counter;
}

#example-element::after {
  content: counter(example-counter);
}

Cú pháp

/* Increases "my-counter" by 1 */
counter-increment: my-counter;

/* Decreases "my-counter" by 1 */
counter-increment: my-counter -1;

/* Increases "counter1" by 1 and decreases "counter2" by 4 */
counter-increment: counter1 counter2 -4;

/* Increases "page" by 1, "section" by 2, while "chapter" doesn't change */
counter-increment: chapter 0 section 2 page;

/* Do not increment/decrement anything: used to override less specific rules */
counter-increment: none;

/* Global values */
counter-increment: inherit;
counter-increment: initial;
counter-increment: revert;
counter-increment: revert-layer;
counter-increment: unset;

Giá trị

Thuộc tính counter-increment nhận làm giá trị một danh sách tên bộ đếm phân tách bởi khoảng trắng được chỉ định dưới dạng <custom-ident> với giá trị <integer> tùy chọn, hoặc từ khóa none. Bạn có thể chỉ định bao nhiêu bộ đếm cần tăng tùy ý, với mỗi tên hoặc cặp tên-số được phân tách bởi khoảng trắng.

<custom-ident>

Chỉ định tên của bộ đếm cần tăng hoặc giảm.

<integer>

Chỉ định giá trị cần thêm vào bộ đếm. Nếu số nguyên đứng trước dấu -, giá trị sẽ bị trừ khỏi bộ đếm. Mặc định là 1 nếu không có giá trị nào được chỉ định.

none

Cho biết không có bộ đếm nào được tăng hoặc giảm. Giá trị này cũng có thể được dùng để hủy tất cả bộ đếm khỏi việc tăng hoặc giảm trong các quy tắc cụ thể hơn. Đây là giá trị mặc định của thuộc tính.

Định nghĩa hình thức

Cú pháp hình thức

counter-increment = 
  [ <counter-name> <integer>? ]+  |
  none                            

<counter-name> = 
  <custom-ident>  

<integer> = 
  <number-token>  

Ví dụ

Giảm giá trị bộ đếm

Trong ví dụ này, chúng ta hiển thị một chuỗi số đếm ngược. Để làm điều này, chúng ta dùng một bộ đếm để hiển thị các số bắt đầu từ 100 và giảm đi 7 mỗi lần.

HTML

<div>
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i
  ><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>

CSS

Chúng ta đặt giá trị ban đầu của bộ đếm tên sevens là 100 bằng cách dùng counter-reset. Sau đó, với mỗi <i>, chúng ta giảm bộ đếm đi 7.

Để đặt lần đếm đầu tiên là 100, chúng ta nhắm vào phần tử <i> đầu tiên bằng cách dùng lớp giả :first-of-type và đặt counter-increment: none;. Ngoài ra, thuộc tính content được dùng trong phần tử giả ::before để hiển thị giá trị của bộ đếm bằng hàm counter().

div {
  counter-reset: sevens 100;
}
i {
  counter-increment: sevens -7;
}
i:first-of-type {
  counter-increment: none;
}
i::before {
  content: counter(sevens);
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
  width: 200px;
}
i {
  flex: 0 0 2em;
}

Kết quả

Nếu chúng ta không dùng counter-reset (hoặc counter-set) để tạo bộ đếm và đặt giá trị thành 100, bộ đếm sevens vẫn sẽ được tạo nhưng với giá trị khởi tạo là 0.

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• Các thuộc tính bộ đếm: counter-set, counter-reset
• At-rule bộ đếm: @counter-style
• Hàm bộ đếm: counter(), counters()
• Hướng dẫn Sử dụng bộ đếm CSS
• Mô-đun CSS lists and counters
• Mô-đun CSS counter styles