ตัวนับและรูปแบบรายการ

เนื้อหาหลายประเภทควรแสดงเป็นรายการ HTML สำหรับเนื้อหาในรายการที่เรียงลำดับ เช่น ขั้นตอนการทำอาหารหรือเชิงอรรถของบทความ เครื่องหมายมักจะมีข้อมูลด้วย CSS มีหลายวิธีในการควบคุมตัวนับในรายการ

รูปแบบรายการ

มีรูปแบบรายการที่กำหนดไว้ล่วงหน้าหลากหลายประเภทที่รองรับตัวเลข ตัวอักษร ตัวเลขโรมัน และระบบการนับหลายระบบทั่วโลก

นอกจากสไตล์ที่เบราว์เซอร์รองรับแล้ว W3C ยังได้เผยแพร่รูปแบบตัวนับสำเร็จรูปที่รองรับรูปแบบเพิ่มเติมอีก 181 รูปแบบในระบบการเขียน 45 ระบบ

หากตัวเลือกเหล่านี้ไม่ตรงกับความต้องการ คุณยังกำหนด@counter-styleที่กำหนดเองได้ด้วย ซึ่งช่วยให้คุณระบุสัญลักษณ์ที่กำหนดเอง คำนำหน้าและคำต่อท้าย และอื่นๆ ได้

โดยค่าเริ่มต้น ตัวทำเครื่องหมายรายการจะอยู่outsideในรายการ วางไว้หน้ารายการ และจัดชิดขวา นอกจากนี้ คุณยังวางเครื่องหมายรายการไว้ในรายการได้ด้วย list-style-position: inside

ตัวนับ

แม้ว่ารูปแบบรายการจะควบคุมวิธีแสดงเครื่องหมายรายการ แต่ตัวนับจะช่วยให้คุณควบคุมค่าที่จะแสดงได้ สำหรับองค์ประกอบรายการ <li> เบราว์เซอร์จะสร้างตัวนับชื่อ list-item ซึ่งจะเพิ่มขึ้นทีละ 1 สำหรับแต่ละรายการที่พบ

ตัวนับ CSS จะนับจำนวนครั้งที่แสดงผลองค์ประกอบที่มีการตั้งค่า counter-increment ที่สอดคล้องกัน

หากต้องการสร้างตัวนับใหม่ ให้ใช้ counter-reset พร้อมชื่อตัวนับและค่าเริ่มต้น (ไม่บังคับ) โดยปกติแล้ว คุณจะตั้งค่านี้ในองค์ประกอบหลักที่เก็บองค์ประกอบทั้งหมดที่จะนับ

จากนั้นเพิ่มพร็อพเพอร์ตี้ counter-increment ในแต่ละองค์ประกอบที่คุณต้องการนับ

สุดท้าย ให้แสดงค่าตัวนับโดยใช้ฟังก์ชัน counter()

ในตัวอย่างนี้ เราต้องการแสดงจำนวนเชิงสะสมของเชิงอรรถเป็นข้อความลิงก์สำหรับเชิงอรรถแต่ละรายการ เนื่องจากเราต้องการตัวนับเดียวสำหรับทั้งเอกสาร เราจึงตั้งค่า counter-reset: note ในส่วนเนื้อหา และเพิ่มค่าในลิงก์เชิงอรรถแต่ละรายการ

นอกจากนี้ คุณยังมีเคาน์เตอร์หลายตัวที่นับรายการต่างๆ ได้ด้วย ในตัวอย่างเชิงอรรถ หากคุณต้องการแสดงดัชนีของส่วนและย่อหน้าที่เชิงอรรถอยู่ คุณจะทำอย่างไร

คุณสร้างจำนวนส่วนในเนื้อหาได้โดยใช้ counter-reset จากนั้นเพิ่มจำนวนในองค์ประกอบ <h2> แต่ละรายการ เราต้องการให้ระบบรีเซ็ตจำนวนย่อหน้าสำหรับแต่ละส่วน จึงจะใช้ counter-reset ในองค์ประกอบ <h2> และเพิ่มในองค์ประกอบ <p>

สุดท้าย เราจะรวมค่าตัวนับในพร็อพเพอร์ตี้ content

a:after {
  content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
  font-size: small;
  vertical-align: super;
}

ตัวนับที่ซ้อนกัน

สิ่งที่จะเกิดขึ้นเมื่อคุณซ้อนรายการไว้ในรายการ ระบบจะเริ่มต้นตัวนับ list-item สำหรับองค์ประกอบ <ul> หรือ <ol> แต่ละรายการ และการใช้ counter() จะแสดงเฉพาะจำนวนการนับที่อยู่ด้านในสุด หากต้องการแสดงจำนวนจากตัวนับที่ซ้อนกันแต่ละตัว ให้ใช้ฟังก์ชัน counters() ซึ่งรับชื่อตัวนับและตัวคั่น

li::marker {
  content: counters(list-item, ".")
  }

ตัวนับย้อนกลับ

โดยค่าเริ่มต้น ตัวนับ (รวมถึงตัวนับ list-item โดยนัยสำหรับองค์ประกอบ <ol>) จะเริ่มต้นที่ 0 และเพิ่มขึ้นทีละ 1 สำหรับแต่ละองค์ประกอบ ซึ่งหมายความว่าองค์ประกอบแรกจะนับเป็น 1 จะเกิดอะไรขึ้นหากคุณต้องการนับถอยหลังไปจนถึง 1

โดยให้เพิ่มแอตทริบิวต์ reversed ลงใน <ol> หากคุณใช้รูปแบบรายการมาตรฐาน เครื่องหมายจะทำงานตามที่คาดไว้ อย่างไรก็ตาม หากใช้ตัวนับที่กำหนดเอง คุณจะต้องตั้งค่า counter-increment เป็นค่าลบ และคำนวณค่าเริ่มต้นสำหรับตัวนับด้วยตนเอง

ทดสอบความเข้าใจ