Hàm counters() của CSS

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

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

Ở đây, chúng ta sử dụng counters() Hàm chèn một chuỗi giữa bộ đếm ở các cấp độ嵌套 khác nhau.

Mô hình

Ví dụ 1

Ở đây, chúng ta sử dụng counters() Hàm chèn một chuỗi giữa bộ đếm ở các cấp độ嵌套 khác nhau (một dấu chấm):

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Thử ngay

Ví dụ 2

Đặt kiểu đếm và thiết lập chuỗi kết nối thành "-":

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, "-", lower-alpha) " ";
}

Thử ngay

Ngữ pháp CSS

counters(countername, string, 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.
string Bắt buộc. Chaining string. Có thể là bất kỳ số lượng ký tự văn bản nào.
counterstyle

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à decimal.

Chi tiết kỹ thuật

Phiên bản: CSS3

Hỗ trợ trình duyệt

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

相关页面

Hướng dẫn:Bộ đếm 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:Ngữ pháp @counter-style CSS

Tham khảo:Hàm counter() CSS