Thuộc tính counter-set trong CSS

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

counter-set Thuộc tính được sử dụng để tạo và đặt bộ đếm CSS thành giá trị cụ thể.

counter-set Thuộc tính thường được sử dụng cùng với thuộc tính counter-increment và thuộc tính content.

Mô hình

Ví dụ 1

Tạo một bộ đếm ("my-counter"), đặt nó thành 5 và tăng 1 mỗi khi xuất hiện <h2> chọn lọc:

body {
  /* Đặt "my-counter" thành 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Tăng "my-counter" lên 1 */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

Thử ngay

Ví dụ 2

Tạo một bộ đếm ("my-counter"), đặt nó thành 5 và giảm 1 mỗi khi xuất hiện <h2> chọn lọc:

body {
  /* Đặt "my-counter" thành 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Đặt "my-counter" giảm 1 */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

Thử ngay

Ví dụ 3

Sử dụng định dạng "Section 10:"、"10.1"、"10.2" để chỉ số chương và phụ chương:

body {
  /* Đặt "section" thành 9 */
  counter-set: section 9;
}
h1 {
  /* Đặt "subsection" thành 0 */
  counter-set: subsection 0;
}
h1::before {
  /* Tăng "section" lên 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* Tăng "subsection" lên 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Thử ngay

Ví dụ 4

Tạo một bộ đếm, đặt thành 9 và tăng lên 1 mỗi khi xuất hiện selector <h2> (sử dụng số La Mã):

body {
  /* Đặt "my-counter" thành 9 */
  counter-set: my-counter 9;
}
h2::before {
  /* Tăng "my-counter" lên 1 */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

Thử ngay

Ngữ pháp CSS

counter-set: none|counter-name number|initial|inherit;

Giá trị thuộc tính

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ tính chất này hoàn toàn.

Trang liên quan

Tham khảo:::before ảo元素

Tham khảo:::after ảo元素

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

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

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