Thiết lập lại bộ đếm - Thủ thuật CSS

Các counter-resetbất động sản cho phép đánh số tự động của các yếu tố. Giống như một danh sách có thứ tự (

article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

Các counter-resettài sản được sử dụng để thiết lập lại bộ đếm CSS đến một giá trị nhất định.

Nó là một phần của mô-đun bộ đếm CSS, là một phần của nội dung được tạo, đánh số tự động và liệt kê thông số kỹ thuật CSS2.1, được mở rộng trong đặc tả CSS3 của Mô-đun nội dung được tạo và thay thế.

Cú pháp

counter-reset: ( ?)+ | none

Ở đâu…

là tên của bộ đếm bạn muốn đặt lại
là giá trị để đặt lại bộ đếm thành
none vô hiệu hóa bộ đếm

body ( counter-reset: my-awesome-counter 0; )

Lưu ý: giá trị mặc định cho số nguyên là 0. Nếu không có số nguyên nào được đặt sau tên bộ đếm, nó sẽ được đặt lại thành 0. Vì vậy, điều này hoạt động như mong đợi:

body ( counter-reset: my-awesome-counter; )

Bạn có thể đặt lại nhiều bộ đếm cùng một lúc bằng danh sách được phân tách bằng dấu cách, mỗi bộ đếm có giá trị cụ thể nếu bạn muốn.

body ( counter-reset: my-awesome-counter 5 my-other-counter; )

Điều này sẽ đặt lại my-awesome-counterthành 5 và my-other-countergiá trị mặc định: 0.

Bạn có thể xem danh sách này như: counter1 value1 counter2 value2 counter3 value3… . Nếu một giá trị bị bỏ qua, nó là 0.

Bản giới thiệu

Trong bản trình diễn sau, articleđặt lại bộ sectionđếm về giá trị mặc định của nó (0), giá trị này sau đó được tăng lên ở mỗi lần xuất hiện phần, sau đó hiển thị trước tiêu đề phần.