1.
1.1
1.2
1.2.1
1.2.2
1.3
2.
2.1
เราสามารถใช้คุณสมบัติที่มีใน CSS ช่วยได้โดยเราไม่ต้องพิมพ์เลขเหล่านั้นเอาเอง หลายๆท่านเคยใช้ Ordered List มาบ้างแล้วการใช้งานก็เช่น
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
เราสามารถใช้คุณสมบัติ content, counter-increment และ counter-reset ของ CSS เข้าช่วยจัดการการนับซ้อนให้เราได้ โดยเขียนคุณสมบัติดังนี้
OL.deepcount {
counter-reset: item;
}
OL.deepcount LI:before {
content: counters(item, ".")". ";
counter-increment: item;
}
OL.deepcount LI OL {
counter-reset: item;
}เราสั่งให้ OL ที่มี Class ชื่อ deepcount ทุกครั้งที่เริ่มต้นใหม่ให้เริ่มนับที่ 1 เสมอ
จากนั้นทุก item ของ list เราเลือกใช้ Event before เพื่อให้ใส่ไว้ข้างหน้าของแต่ละ item โดยให้ใส่จุดตามหลังลำดับเสมอ และทุก item จะมีการอ้างถึงตัวนับก่อนหน้าเสมอด้วยคำสั่ง counters
และทุกครั้งที่มี OL ซ้อนก็ให้เริ่มนับเลขย่อยใหม่เสมอ เราก็จะสามารถเขียน Ordered List ซ้อนได้โดยง่าย พร้อมทั้งเรายังสามารถจัดเอกสารให้เป็นระเบียบได้ง่ายในคราวเดียวกันด้วย
คุณสมบัตินี้มีใน CSS 2.1 ซึ่งแน่นอนว่า Browser เก่าๆ เช่น Internet Explorer 6 จะไม่รู้จักคุณสมบัตินี้
คำเตือน เนื้อหาต่างๆ ในบทความ รวมถึงรูปภาพทั้งหมดในบทความนี้ เป็นความเห็นส่วนตัวของผู้เขียนแต่ละคน ซึ่งแต่ละคนได้ทำการลงทะเบียน และเขียนบทความลงใน Modoeye Articles นี้โดยไม่มีค่าธรรมเนียมใดๆ บทความเหล่านี้เป้าหมายเพื่อการศึกษา และความบันเทิงเท่านั้น การนำส่วนหนึ่งส่วนใดของบทความไปใช้งาน ควรทำการอ้างอิงถึงผู้เขียนและแหล่งที่มาด้วย