CSS @counter-style 規則

定義和用法

CSS @counter-style 規則用於定義自定義計數器樣式。

當預定義的樣式不符合需求時，@counter-style 規則允許您定義自己的計數器樣式。

實例

為列表指定自定義計數器樣式：

@counter-style crown {
  system: cyclic;
  symbols: "\1F451";
  suffix: " ";
}
ul {
  list-style: crown;
}

亲自試一試

CSS syntax

@counter-style เลือก {
  one or more descriptors
}

ค่าของแบบที่มีความหมาย

ค่าแบบที่มีความหมาย ค่า
เลือก

countername

กำหนดชื่อตัวบอกที่มีความแตกต่างกันในการเขียนตัวหนังสือ
แสดงให้เห็น: ชื่อตัวบอกไม่สามารถเป็น none, decimal, disc, square, circle, disclosure-open หรือ disclosure-closed

system

กำหนดระบบที่ใช้ในการเปลี่ยนค่าจำนวนเต็มของตัวบอกเป็นตัวอักษร

ถ้าระบบที่กำหนดเป็น cyclic, numeric, alphabetic, symbolic หรือ fixed จะต้องการ symbols ในลิสต์เลือก
ถ้าระบบที่กำหนดเป็น additive จะต้องการ additive-symbols ในลิสต์เลือก

symbols

กำหนดสัญลักษณ์ที่ใช้ในสัญลักษณ์ (สามารถเป็นข้อความหรือรูปภาพหรือตัวเลขที่กำหนด)

ถ้าเครื่องมือที่เลือกกำหนดเป็น cyclic, numeric, alphabetic, symbolic หรือ fixed จะต้องการ
สัญลักษณ์ UTF-8 ของ HTML

additive-symbols

ระบบบอกนับเพิ่มลงไปตามเลขรอมันยังประกอบด้วยชุดสัญลักษณ์ที่มีน้ำหนัก

ลิสต์เลือกของตัวบอกนับเป็นเลขไม่ลดเหลือนี้ และมีน้ำหนักเลขเป็นจำนวนเต็มไม่เป็นลบ

ถ้าเครื่องมือที่เลือกกำหนดเป็น additive จะต้องการ
negative กำหนดสัญลักษณ์ที่ต้องการเพิ่มขึ้นหรือข้างหลังแสดงที่เป็นจำนวนเล็ก
prefix กำหนดสัญลักษณ์ที่ต้องการเพิ่มขึ้นหน้าแสดงที่หน้าสัญลักษณ์ที่แสดง
suffix กำหนดสัญลักษณ์ที่ต้องการเพิ่มขึ้นท้ายแสดงที่ท้ายสัญลักษณ์ที่แสดง
range

กำหนดช่วงค่าของสไตล์นับ

ถ้าค่านับของตัวเลขอยู่นอกช่วงที่กำหนด จะเปลี่ยนไปใช้รูปแบบที่เป็นการแทนที่
pad

ถ้าสัญลักษณ์ที่แสดงว่าต้องมีความยาวขั้นต่ำ ใช้คำบอกนี้

ตัวอย่าง ถ้าคุณต้องการให้ตัวเลขเริ่มต้นที่ 01 และต่อเนื่องเป็น 02, 03, 04 และอื่น ๆ ใช้คำบอก pad ในการบอก

สำหรับตัวเลขที่มากกว่าค่า pad ที่กำหนด สัญลักษณ์จะถูกสร้างเป็นปกติ
speak-as

กำหนดวิธีที่ตัวเครื่องสร้างเสียงควรอ่านสไตล์นับ

ตัวอย่าง สำหรับรายการเรียงลำดับ อ่านออกเป็นตัวเลขหรือตัวอักษร; สำหรับรายการไม่เรียงลำดับ อ่านออกเป็นคำขวัญ
fallback

กำหนดชื่อนับเปลี่ยนที่ใช้เมื่อระบบไม่สามารถสร้างสัญลักษณ์หรืออยู่นอกช่วงที่กำหนด

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

การสนับสนุนของเบรายเวอร์

ตารางหลักชื่อเลขแสดงรุ่นเบรายเวอร์ที่สนับสนุนทั้งหมดของ @ กฎนี้。

Chrome Edge Firefox Safari Opera
91 91 33 17 77