ການອະທິບາຍ ແລະ ການນໍາໃຊ້ counters() ວິທະຍາ CSS

ການອະທິບາຍ ແລະ ການນໍາໃຊ້

CSS ພວກເຮົາໃຊ້ ການເພີ່ມຄູ່ມູນຄົງລະດັບຫລັງຄຳອື່ນລະດັບຫລັງຄຳອື່ນລະດັບຫລັງຄຳອື່ນ.

ຕົວຢ່າງ 1 ພວກເຮົາໃຊ້ ການເພີ່ມຄູ່ມູນຄົງລະດັບຫລັງຄຳອື່ນລະດັບຫລັງຄຳອື່ນລະດັບຫລັງຄຳອື່ນລະດັບຫລັງຄຳອື່ນ.

ການເພີ່ມຄູ່ມູນຄົງລະດັບຫລັງຄຳອື່ນລະດັບຫລັງຄຳອື່ນລະດັບຫລັງຄຳອື່ນ.

ຄວາມຈຳນວນ

ຕົວຢ່າງ 1 ພວກເຮົາໃຊ້ counters()

ການຈັດນັກບັນທຶກ, ແລະການຈັດສາຍສັນຍາເຊື່ອມເປັນ "-":
  ol {
  counter-reset: section;
content: counters(section, "-", lower-alpha) " ";
list-style-type: none;
  li::before {
  ການເພີ່ມຄູ່ມູນຄົງລະດັບຫລັງຄຳອື່ນລະດັບຫລັງຄຳອື່ນລະດັບຫລັງຄຳອື່ນລະດັບຫລັງຄຳອື່ນ (ສາມາດເປັນຄູ່ມູນຄົງຄຳໜຶ່ງ).
content: counters(section, "-", lower-alpha) " ";

}

content: counters(section,".") " ";

ຕົວຢ່າງ 2

ການຈັດນັກບັນທຶກ, ແລະການຈັດສາຍສັນຍາເຊື່ອມເປັນ "-":
  ol {
  counter-reset: section;
content: counters(section, "-", lower-alpha) " ";
list-style-type: none;
  li::before {
  counter-increment: section;
content: counters(section, "-", lower-alpha) " ";

}

ທົດລອງດີຕະຫລອດ

ສັນຍາວິທະຍາ CSSອະທິບາຍcounters( stringcounters( counterstyle,
) ຄູ່ມູນຄົງ
ອະທິບາຍ

countername

ຕ້ອງເວົ້າວ່າຊື່ຫົວໜ້າການຈັດນັກບັນທຶກແມ່ນບໍ່ມີການສະແດງຄຳເຂົ້າຂອງຄຳໜຶ່ງຫລັງຄຳອື່ນ.
string ຈຳເປັນ. ສາຍສັນຍາການເຊື່ອມ. ສາມາດເປັນຄູ່ມູນຄົງຈຳນວນຕົວຈົນ.
counterstyle

ຄົງເປັນຫົວໜ້າການຈັດນັກບັນທຶກ (ສາມາດເປັນຄູ່ມູນຄົງ list-style-type, @counter-style ຊື່ຫົວໜ້າການຈັດນັກບັນທຶກ ຫຼື symbols() ອາກາດ).

ຄູ່ມູນຄົງເປັນ decimal。

ລະອຽດເຕັກນິກ

ສະຖານະ: CSS3

ສະໜັບສະໜູນບັນຊີວະບັນນະວັດ

Chrome Edge Firefox Safari Opera
ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ

ເບີໂຕບັນທຶກ

ການສອນ:ກົດລະບຽບ CSS 计数器

ກ່ຽວກັບປະກອບປະກອບກອງcontentCSS

ກ່ຽວກັບປະກອບປະກອບກອງcounter-incrementCSS

ກ່ຽວກັບປະກອບປະກອບກອງcounter-resetCSS

ກ່ຽວກັບກົດລະບຽບ CSS @counter-style

ກ່ຽວກັບພາສານິຍົມ CSS counter()