counters()

Try it

ol {
  counter-reset: index;
  list-style-type: none;
}

li::before {
  counter-increment: index;
  content: counters(index, ".", decimal) " ";
}

<ol>
  <li>Mars</li>
  <li>
    Saturn
    <ol>
      <li>Mimas</li>
      <li>Enceladus</li>
      <li>
        <ol>
          <li>Voyager</li>
          <li>Cassini</li>
        </ol>
      </li>
      <li>Tethys</li>
    </ol>
  </li>
  <li>
    Uranus
    <ol>
      <li>Titania</li>
    </ol>
  </li>
</ol>

Cú pháp

/* Sử dụng cơ bản - kiểu mặc định là decimal */
counters(counter-name, '.');

/* thay đổi hiển thị bộ đếm */
counters(counter-name, '-', upper-roman)

Bản thân bộ đếm không có hiệu ứng hiển thị. Hàm counters() (và hàm counter()) là thứ làm cho nó hữu ích bằng cách trả về nội dung do nhà phát triển định nghĩa.

Giá trị

Hàm counters() chấp nhận hai hoặc ba tham số. Tham số đầu tiên là <counter-name>. Tham số thứ hai là <string> nối. Tham số thứ ba tùy chọn là <counter-style>.

<counter-name>

Một <custom-ident> xác định các bộ đếm, là cùng tên phân biệt chữ hoa chữ thường được sử dụng cho các thuộc tính counter-reset và counter-increment. Tên không thể bắt đầu bằng hai dấu gạch ngang và không thể là none, unset, initial, hoặc inherit. Ngoài ra, đối với các bộ đếm nội tuyến dùng một lần, hàm symbols() có thể được sử dụng thay vì bộ đếm được đặt tên trong các trình duyệt hỗ trợ symbols().

<string>

Bất kỳ số lượng ký tự văn bản nào. Các ký tự không phải Latin phải được mã hóa bằng các chuỗi thoát Unicode của chúng: ví dụ, \000A9 đại diện cho ký hiệu bản quyền.

<counter-style>

Tên kiểu bộ đếm hoặc hàm symbols(). Tên kiểu bộ đếm có thể là kiểu được định nghĩa trước như numeric, alphabetic, hoặc symbolic, kiểu được định nghĩa trước phức tạp như East Asian hoặc Ethiopic, hoặc kiểu bộ đếm được định nghĩa trước khác. Nếu bỏ qua, kiểu bộ đếm mặc định là decimal.

Giá trị trả về là một chuỗi chứa tất cả các giá trị của tất cả các bộ đếm trong tập hợp bộ đếm CSS của phần tử có tên <counter-name> theo kiểu bộ đếm được định nghĩa bởi <counter-style> (hoặc decimal, nếu bỏ qua). Chuỗi trả về được sắp xếp theo thứ tự từ ngoài cùng đến trong cùng, được nối bằng <string> được chỉ định.

Cú pháp hình thức

<counters()> = 
  counters( <counter-name> , <string> , <counter-style>? )  

<counter-name> = 
  <custom-ident>  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<counter-style-name> = 
  <custom-ident>  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

Ví dụ

So sánh giá trị bộ đếm mặc định với chữ số La Mã viết hoa

Ví dụ này bao gồm hai hàm counters(): một với <counter-style> được đặt và một mặc định là decimal.

HTML

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content:
    counters(listCounter, ".", upper-roman) ") ";
}
li::before {
  content:
    counters(listCounter, ".") " == "
    counters(listCounter, ".", lower-roman);
}

Kết quả

So sánh giá trị bộ đếm decimal-leading-zero với chữ thường

Ví dụ này bao gồm ba hàm counters(), mỗi hàm với các giá trị <string> và <counter-style> khác nhau.

HTML

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
  content:
    counters(count, "-", decimal-leading-zero) ") ";
}
li::before {
  content:
    counters(count, "~", upper-alpha) " == "
    counters(count,  "*", lower-alpha);
}

Kết quả

Thông số kỹ thuật

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

Xem thêm

• Sử dụng CSS Counters
• Thuộc tính counter-set
• Thuộc tính counter-reset
• Thuộc tính counter-increment
• At-rule @counter-style
• Hàm CSS counter()
• Pseudo-element ::marker
• Mô-đun CSS lists and counters
• Mô-đun CSS counter styles
• Mô-đun CSS generated content