1. Web
  2. CSS
  3. Reference
  4. Properties
  5. counter-set

counter-set

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Thuộc tính CSS counter-set đặt bộ đếm CSS trên phần tử về các giá trị đã cho.

Nếu các bộ đếm không tồn tại, thuộc tính counter-set sẽ tạo một bộ đếm mới cho mỗi tên bộ đếm trong danh sách các cặp bộ đếm và giá trị phân tách bằng khoảng trắng. Tuy nhiên, để tạo bộ đếm mới, nên sử dụng thuộc tính CSS counter-reset.

Nếu một tên bộ đếm trong danh sách không có giá trị, giá trị của bộ đếm đó sẽ được đặt thành 0.

Note: Giá trị của bộ đếm có thể được tăng hoặc giảm bằng thuộc tính CSS counter-increment.

Try it

counter-set: none;

counter-set: chapter-count 0;

counter-set: chapter-count;

counter-set: chapter-count 5;

counter-set: chapter-count -5;

<section class="default-example" id="default-example">
  <div class="transition-all" id="chapters">
    <h1>Alice's Adventures in Wonderland</h1>
    <h2>Down the Rabbit-Hole</h2>
    <h2 id="example-element">The Pool of Tears</h2>
    <h2>A Caucus-Race and a Long Tale</h2>
    <h2>The Rabbit Sends in a Little Bill</h2>
  </div>
</section>

#default-example {
  text-align: left;
  counter-set: chapter-count;
}

#example-element {
  background-color: #37077c;
  color: white;
}

h2 {
  counter-increment: chapter-count;
  font-size: 1em;
}

h2::before {
  content: "Chapter " counter(chapter-count) ": ";
}

Cú pháp

css
/* Đặt "my-counter" về 0 */
counter-set: my-counter;

/* Đặt "my-counter" về -1 */
counter-set: my-counter -1;

/* Đặt "counter1" về 1, và "counter2" về 4 */
counter-set: counter1 1 counter2 4;

/* Hủy bất kỳ bộ đếm nào có thể đã được đặt trong các quy tắc kém cụ thể hơn */
counter-set: none;

/* Giá trị toàn cục */
counter-set: inherit;
counter-set: initial;
counter-set: revert;
counter-set: revert-layer;
counter-set: unset;

Thuộc tính counter-set được chỉ định là một trong các dạng sau:

  • Một <custom-ident> đặt tên cho bộ đếm, theo sau tùy chọn là một <integer>. Bạn có thể chỉ định nhiều bộ đếm để đặt lại, mỗi tên hoặc cặp tên-số được phân tách bằng dấu cách.
  • Giá trị từ khóa none.

Giá trị

<custom-ident>

Tên của bộ đếm cần đặt.

<integer>

Giá trị để đặt bộ đếm tại mỗi lần xuất hiện của phần tử. Mặc định là 0 nếu không được chỉ định. Nếu hiện tại không có bộ đếm nào với tên đã cho trên phần tử, phần tử sẽ tạo một bộ đếm mới với tên đó có giá trị ban đầu là 0 (mặc dù sau đó có thể ngay lập tức đặt hoặc tăng giá trị đó thành một giá trị khác).

none

Không thực hiện việc đặt bộ đếm nào. Giá trị này có thể được dùng để ghi đè counter-set được định nghĩa trong một quy tắc kém cụ thể hơn.

Định nghĩa hình thức

Initial valuenone
Applies toall elements
Inheritedno
Computed valueas specified
Animation typeby computed value type

Cú pháp hình thức

counter-set = 
  [ <counter-name> <integer>? ]+  |
  none                            

<counter-name> = 
  <custom-ident>  

<integer> = 
  <number-token>

Ví dụ

Đặt các bộ đếm có tên

css
h1 {
  counter-set: chapter section 1 page;
  /* Đặt bộ đếm chapter và page về 0,
     và bộ đếm section về 1 */
}

Đặc tả kỹ thuật

Specification
CSS Lists and Counters Module Level 3
# propdef-counter-set

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content