จริงๆ แล้วองค์ประกอบหลอกใน CSS นั้นใช้งานง่ายมาก แต่หลายคนมักมองข้ามไปว่าค่าของแอตทริบิวต์เนื้อหาที่มักใช้ในองค์ประกอบหลอกนั้นรองรับเฉพาะสตริงเท่านั้น คุณลักษณะเนื้อหาอื่น ๆ ที่ใช้กันทั่วไป นอกจากนี้ยังมี uri และ counter สิ่งที่ฉันต้องการแนะนำในวันนี้คือ conter (ตัวนับ)
ตัวนับใน CSS นั้นคล้ายคลึงกับตัวแปร สามารถใช้ฟังก์ชันการนับแบบง่าย ๆ และแสดงผลลัพธ์บนหน้าเว็บได้ ซึ่งใช้กันอย่างแพร่หลายในเว็บไซต์ยุคแรก ๆ หากต้องการใช้ตัวนับ คุณต้องใช้แอตทริบิวต์ต่อไปนี้:
มาดูวิธีการใช้ตัวนับใน CSS
1. ใช้ตัวนับเพื่อกำหนดหมายเลขอัตโนมัติ
CSS นับตัวแปรที่เพิ่มขึ้นตามกฎ
ตัวนับ CSS ใช้คุณสมบัติดังต่อไปนี้:
(1) counter-reset:name1 name2 สร้างหรือรีเซ็ตตัวนับ (สามารถกำหนดหลายตัวนับในเวลาเดียวกัน โดยคั่นด้วยช่องว่าง)
(2) การเพิ่มตัวนับ: ชื่อตัวแปรการเพิ่มขั้นตอน (สามารถเพิ่มได้ตั้งแต่หนึ่งรายการขึ้นไป)
(3) content:counter(name) แทรกเนื้อหาที่สร้างขึ้น (โดยใช้องค์ประกอบหลอกก่อน/หลัง)
(4) ฟังก์ชั่น counter() หรือ counters() เพิ่มค่าตัวนับให้กับองค์ประกอบ
เมื่อสร้างตัวนับจะต้องสร้างในแท็กก่อนหน้าหรือแท็กหลักของแท็กหากกำหนดไว้ในแท็กของตัวเองก็จะไม่ถูกต้อง
การใช้งานเฉพาะ:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>การเขียนโปรแกรม Dotcpp</title><style>div{counter-reset:counter1;}h2{counter-reset:counter2;}h2:: ก่อน{/*ตั้งค่าขนาดขั้นตอนก่อน*/counter-increase:counter11;content:'th'counter(count er1)'section';}p::before{/*ตั้งค่าขนาดขั้นตอนก่อน*/counter-increation:counter21;content:'ส่วน 'counter(counter1)'';}</style></he โฆษณา><body><div><h2></h2><p></p><p></p><p></p><h2></h2><p></p> <p></p><p></p><p></p></div></body></html>ผลการวิ่ง:
2. เริ่มต้นตัวนับ
หากต้องการใช้ตัวนับ คุณต้องใช้แอตทริบิวต์รีเซ็ตตัวนับเพื่อสร้างตัวนับก่อน กระบวนการนี้เรียกว่าการเริ่มต้นตัวนับ รูปแบบไวยากรณ์ของแอตทริบิวต์การรีเซ็ตตัวนับจะเป็นดังนี้:
ตัวนับรีเซ็ต: ไม่มี|[<identifier><integer>]
คำอธิบายพารามิเตอร์มีดังนี้:
(1) ไม่มี: ป้องกันการรีเซ็ตตัวนับ;
(2) <identifier>: กำหนดชื่อของตัวนับ;
(3) <จำนวนเต็ม>: กำหนดค่าเริ่มต้นของตัวนับ ค่าเริ่มต้นคือ 0 และอาจเป็นค่าลบได้
3. ตัวนับเพิ่มขึ้นโดยอัตโนมัติ
หลังจากเตรียมใช้งานตัวนับ คุณสามารถใช้แอตทริบิวต์ตัวนับเพิ่มขึ้นเพื่อระบุว่าตัวนับจะเพิ่มขึ้นเมื่อใด ไวยากรณ์จะเป็นดังนี้:
ตัวนับที่เพิ่มขึ้น: ไม่มี|[<identifier><integer>]
คำอธิบายพารามิเตอร์มีดังนี้:
(1) ไม่มี: ป้องกันไม่ให้ตัวนับเพิ่มขึ้น
(2) <identifier>: กำหนดชื่อของตัวนับที่จะเพิ่ม;
(3) <จำนวนเต็ม>: กำหนดค่าที่ตัวนับเพิ่มขึ้นในแต่ละครั้ง ค่าเริ่มต้นคือ 1 และอาจเป็นค่าลบได้
4. เคาน์เตอร์แสดงผล
สุดท้ายมีวิธีแสดงเคาน์เตอร์ หากต้องการแสดงตัวนับ คุณสามารถใช้ฟังก์ชัน counter() หรือ counters() ได้ ไวยากรณ์ของทั้งสองฟังก์ชันมีดังนี้:
เคาน์เตอร์ (ชื่อ) เคาน์เตอร์ (ชื่อ, สตริง, ประเภทรายการสไตล์)
คำอธิบายพารามิเตอร์มีดังนี้:
(1) ชื่อ: ชื่อเคาน์เตอร์
(2) สตริง: สตริงที่ใช้สำหรับประกบเมื่อใช้ตัวนับซ้อนกัน
(3) list-style-type: สไตล์ที่แสดงโดยตัวนับอาจเป็นค่าใดก็ได้ของ "แอตทริบิวต์ list-style-type" ที่อนุญาตใน CSS
ต่อไปนี้ใช้ตัวอย่างง่ายๆ เพื่อสาธิตการใช้ตัวนับ:
<!DOCTYPEhtml><html><head><style>body{counter-reset:chapter;}h5,h6{margin:5px05px;}h5{counter-reset:section;counter-increase:chapter;}h6{counter- เพิ่มขึ้น: ส่วน;}h5: ก่อน {content:Chaptercounter(บท); }h6:before{content:counter(chapter).counter(section);}</style></head><body><h5>บทที่ 1</h5><h6>ส่วนที่ 1</h6>< h6> เลขที่ ส่วนที่ 2</h6><h6>ส่วนที่ 3</h6><h6>ส่วนที่ 4</h6><h5>บทที่ 2</h5><h6>ส่วนที่ 1</h6><h6>บทที่ 2</ h6><h6>ส่วนที่ 3</h6><h6>ส่วนที่ 4</h6></body></html>ผลการวิ่ง:
5. การทำรังเคาน์เตอร์
นอกจากนี้ ตัวนับยังสามารถซ้อนกันได้ และฟังก์ชัน counters() สามารถใช้เพื่อแทรกสตริงระหว่างตัวนับที่ซ้อนกันในระดับต่างๆ ดังที่แสดงในตัวอย่างต่อไปนี้:
<!DOCTYPEhtml><html><head><style>ol{/*สร้างอินสแตนซ์ตัวนับใหม่สำหรับแต่ละองค์ประกอบ ol*/counter-reset:ol-list;list-style-type:none;}li:before{ / *เพิ่มเฉพาะอินสแตนซ์ปัจจุบันของตัวนับ*/content:counters(ol-list,.),;} < /style></head><body><ol><li>ระดับเสียง</li><li>บท<ol><li>ส่วน</li><li>ส่วน</li><li>ส่วน<ol ><li>ส่วน</li><li>ส่วน</li></ol></l i><li>ส่วน<ol><li>ส่วนย่อย</li><li>ส่วนย่อย</li><li>ส่วนย่อย</li></ol></li></ol></li>< li>บท</li><li>บท</li></ol></body></html>ผลการวิ่ง:
