CSS @counter-style 规则

定义和用法

CSS @counter-style 该规则用于定义自定义计数器样式。

当预定义的样式不符合需求时，@counter-style 该规则允许您定义自己的计数器样式。

实例

指定列表的自定义计数器样式：

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

亲自试一试

CSS syntax

@counter-style countername {
  one or more descriptors
}

Attribute value

Value Description
countername

Define the case-sensitive name of the counter style.

Note: The counter name cannot be: none, decimal, disc, square, circle, disclosure-open, or disclosure-closed.
system

Define the algorithm to convert the integer value of the counter to a string.

Required if the system is set to: cyclic, numeric, alphabetic, symbolic, or fixed, then the symbols specifier is required.

Required if the system is set to: additive, then the additive-symbols specifier is required.
symbols

Define the symbols used for marking (which can be a string, image, or custom identifier).

Required if the system specifier is set to cyclic, numeric, alphabetic, symbolic, or fixed.

HTML UTF-8 symbols.
additive-symbols

Define the additive tuple of the additive system.

The additive counter system (such as Roman numerals) consists of a series of weighted symbols.

The descriptor is a list of counter symbols in descending order of weight and their non-negative integer weights.

Required if the system specifier is set to additive.
negative Define the prefix or suffix symbol to be appended when the value is negative.
prefix Define the prefix symbol to be appended to the marker representation.
suffix Define the suffix symbol to be appended to the marker representation.
range

Define the value range of the counter style.

Fallback to the alternate style if the counter value is out of range.
pad

If the marker indicates that it must have a minimum length, use this specifier.

For example, if you want the counter to start from 01 and then be 02, 03, 04, etc., use the pad specifier.

For counters greater than the specified pad value, the marker will be constructed normally.
speak-as

Define how the speech synthesizer should read out the counter style.

For example, for ordered lists, read out as numbers or letters; for unordered lists, read out as audio cues.
fallback

Define the name of the counter to fallback to if the system cannot construct the marker or is out of the specified range.

If the alternate counter or the alternate system cannot represent the counter value, fallback to decimal style.

Browser support

The numbers in the table indicate the first browser version that fully supports the @ rule.

Chrome Edge Firefox Safari Opera
91 91 33 17 77