Hàm counter() trong CSS

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

counter() Hàm trả về giá trị hiện tại của bộ đếm được chỉ định dưới dạng chuỗi.

Mô hình

Ví dụ 1

Tạo bộ đếm cho trang (trong selector body). Tăng giá trị đếm cho mỗi phần tử <h2> và thêm văn bản "Chương số mấy" trước mỗi phần tử <h2>:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Chương " counter(section) ": ";
}

Thử nghiệm trực tiếp

Ví dụ 2

Đặt kiểu đếm:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Chương " counter(section, upper-roman) ": ";
}

Thử nghiệm trực tiếp

Ngữ pháp CSS

counter(countername, counterstyle)
Giá trị Mô tả
countername

Bắt buộc. Tên của bộ đếm (cùng với tên được sử dụng trong các thuộc tính counter-reset và counter-increment).

Lưu ý, tên phân biệt chữ hoa và chữ thường.
counterstyle

Tùy chọn. Kiểu của bộ đếm (có thể là giá trị của list-style-type, tên của @counter-style hoặc hàm symbols()).

Giá trị mặc định là hệ số mười.

Chi tiết kỹ thuật

Phiên bản: CSS3

Trình duyệt hỗ trợ

Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Trang liên quan

Giáo trình:Bộ đếm trong CSS

Tham khảo:Thuộc tính content của CSS

Tham khảo:Thuộc tính counter-increment của CSS

Tham khảo:Thuộc tính counter-reset của CSS

Tham khảo:Điều khoản @counter-style trong CSS

Tham khảo:Hàm counters() trong CSS