Thuộc tính counter-reset của CSS

Định nghĩa và cách sử dụng

Thuộc tính counter-reset thiết lập giá trị của bộ đếm xuất hiện số lần của một bộ chọn nào đó. Mặc định là 0.

Sử dụng thuộc tính này, bộ đếm có thể thiết lập hoặc đặt lại thành bất kỳ giá trị nào, có thể là giá trị dương hoặc âm. Nếu không cung cấp số, mặc định là 0.

Ghi chú:Nếu sử dụng "display: none", không thể đặt lại bộ đếm. Nếu sử dụng "visibility: hidden", có thể đặt lại bộ đếm.

Xem thêm:

Hướng dẫn tham khảo CSS:Định dạng ảo :before trong CSS

Hướng dẫn tham khảo CSS:Định dạng ảo :after trong CSS

Hướng dẫn tham khảo CSS:Thuộc tính content

Hướng dẫn tham khảo CSS:Thuộc tính counter-increment

Hàm CSS:Hàm counter()

Hướng dẫn tham khảo HTML DOM:Thuộc tính counterReset

Mô hình

Cách đặt số cho phần và phần con (ví dụ "Section 1", "1.1", "1.2"):

body
  {
  counter-reset:section;
  }
h1
  {
  counter-reset:subsection;
  }
h1:before
  {
  content:"Section " counter(section) ". ";
  counter-increment:section;
  }
h2:before
  {
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) ";
  }

Thử ngay

Ngữ pháp CSS

counter-reset: none|Tên number|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
none Mặc định. Không thể đặt lại bộ đếm của chọn器.
id number

id Định nghĩa chọn器, id hoặc class để đặt lại bộ đếm.

number Có thể thiết lập giá trị của bộ đếm xuất hiện của chọn器. Có thể là số dương, số không hoặc số âm.

inherit Quy định giá trị của thuộc tính counter-reset nên được kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: none
Kế thừa: no
Phiên bản: CSS2
Ngữ pháp JavaScript: object.style.counterReset="subsection"

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 2.0 3.1 9.6

Ghi chú:Nếu đã quy định !DOCTYPE, thì Internet Explorer 8 (và các phiên bản cao hơn) hỗ trợ thuộc tính counter-reset.