Lỗi CSS - tính toán

Pizza

Hamburger

Hotdogs

Bộ đếm CSS là "biến" được duy trì bởi CSS, giá trị của nó có thể được tăng lên bằng cách sử dụng các quy tắc CSS (để theo dõi số lần sử dụng).

Bộ đếm cho phép bạn điều chỉnh外观 của nó dựa trên vị trí của nội dung trong tài liệu.

Tự động đánh số có bộ đếm

Bộ đếm CSS giống như "biến" như vậy. Giá trị của biến có thể được tăng lên bằng cách sử dụng các quy tắc CSS (sẽ theo dõi số lần sử dụng của chúng).

Để sử dụng bộ đếm CSS, chúng ta sẽ sử dụng các thuộc tính sau:

  • counter-reset - tạo hoặc đặt lại bộ đếm
  • counter-increment - tăng giá trị bộ đếm
  • content - chèn nội dung được tạo ra
  • counter() hoặc counters() hàm - thêm giá trị bộ đếm vào phần tử

Để sử dụng bộ đếm CSS, bạn phải trước tiên sử dụng counter-reset tạo nó ra.

ví dụ dưới đây tạo một bộ đếm cho trang (trong chọn器 body) và tăng giá trị bộ đếm cho mỗi <h2> phần tử, đồng thời thêm "Section <giá trị của bộ đếm>:" ở đầu mỗi <h2> phần tử:

ví dụ

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Thử nghiệm trực tiếp

Bộ đếm đệm

ví dụ dưới đây tạo một bộ đếm cho trang (section) và tạo một bộ đếm cho mỗi <h1> phần tử (subsection).

"section" bộ đếm đếm mỗi <h1> phần tử, đồng thời ghi lại "Section" và giá trị bộ đếm section, "subsection" bộ đếm đếm mỗi <h2> phần tử, đồng thời ghi lại giá trị bộ đếm section và subsection:

ví dụ

body {
  counter-reset: section;
}
h1 {
  counter-reset: subsection;
}
h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Thử nghiệm trực tiếp

Bộ đếm rất hữu ích cho việc tạo danh sách tóm tắt, vì nó sẽ tự động tạo một instance bộ đếm mới trong các phần tử con. Ở đây, chúng ta sử dụng counters() hàm trong đó chèn một chuỗi giữa các bộ đếm ở các cấp độ khác nhau:

ví dụ

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

Thử nghiệm trực tiếp

Thuộc tính bộ đếm CSS

Thuộc tính Mô tả
content Sử dụng cùng với pseudo-element ::before và ::after để chèn nội dung được tạo.
counter-increment Tăng một hoặc nhiều giá trị bộ đếm.
counter-reset Tạo hoặc đặt lại một hoặc nhiều bộ đếm.