Biến đếm trong CSS - CSS Counters

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    8 thg 11, 2022

  • Số lượt xem

    294 lượt xem


Automatic Numbering với Counters

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

Để làm việc với CSS Counter, chúng tôi 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 đã tạo
  • counter() hoặc counters() function - Thêm giá trị của bộ đếm vào một element

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

Ví dụ sau tạo bộ đếm cho trang (trong body selector), sau đó tăng giá trị bộ đếm cho mỗi element <h2> và thêm "Phần <giá trị của bộ đếm>:" vào đầu mỗi element <h2>:

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

 

Nesting Counters

Ví dụ sau tạo một counter cho trang (section) và một counter cho mỗi element <h1> (subsection). Counter "section" sẽ được tính cho mỗi element <h1> với "Phần <giá trị của counter section>." Và counter "subsection" sẽ được tính cho mỗi element <h2> với "<giá trị của bộ đếm phần >. <giá trị của counter subsection> ":

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

Một counter cũng có thể hữu ích để tạo list bởi vì một phiên bản mới của counter được tự động tạo trong các element con. Ở đây chúng tôi sử dụng hàm counters () để chèn một chuỗi giữa các cấp khác nhau của các counter lồng nhau:

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

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.