counter()

Try it

.double-list {
  counter-reset: count -1;
}

.double-list li {
  counter-increment: count 2;
}

.double-list li::marker {
  content: counter(count, decimal) ") ";
}

<p>Best Dynamic Duos in Sports:</p>
<ol class="double-list">
  <li>Simone Biles + Jonathan Owens</li>
  <li>Serena Williams + Venus Williams</li>
  <li>Aaron Judge + Giancarlo Stanton</li>
  <li>LeBron James + Dwyane Wade</li>
  <li>Xavi Hernandez + Andres Iniesta</li>
</ol>

Cú pháp

/* Sử dụng cơ bản */
counter(counter-name);

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

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

Giá trị

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

<counter-name>

Một <custom-ident> xác định bộ đếm, là cùng tên phân biệt chữ hoa chữ thường được sử dụng với các giá trị thuộc tính counter-reset và counter-increment. Tên bộ đếm 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.

<counter-style>

Tên <list-style-type>, tên <@counter-style> hoặc hàm symbols(), trong đó tên kiểu bộ đếm là kiểu bộ đếm được định nghĩa trước numeric, alphabetic, hoặc symbolic, kiểu bộ đếm được định nghĩa trước chữ hán phức tạp Đông Á 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.

Cú pháp hình thức

<counter()> = 
  counter( <counter-name> , <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ụ

lower-roman so với lower-alpha

Trong ví dụ này, chúng ta hiển thị bộ đếm sử dụng kiểu danh sách lower-roman và lower-alpha.

HTML

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

CSS

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::after {
  content:
    "[" counter(count, lower-roman) "] == ["
    counter(count, lower-alpha) "]";
}

Kết quả

Hiển thị bộ đếm sử dụng ba kiểu

Trong ví dụ này, chúng ta sử dụng hàm counter() ba lần.

HTML

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

CSS

Chúng ta bao gồm hàm counter() với ba kiểu bộ đếm khác nhau, bao gồm giá trị thập phân mặc định. Chúng ta đã thêm padding vào danh sách để cung cấp không gian cho chuỗi ::marker dài.

ol {
  counter-reset: listCounter;
  padding-left: 5em;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content:
    "Item #" counter(listCounter) " is: ";
}
li::after {
  content:
    "[" counter(listCounter, decimal-leading-zero) "] == ["
    counter(listCounter, upper-roman) "]";
}

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
• counter-reset
• counter-set
• counter-increment
• @counter-style
• Hàm CSS counters()
• Mô-đun CSS lists and counters
• Mô-đun CSS counter styles
• Mô-đun CSS generated content