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 for converting 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 descriptor is required.

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

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

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

HTML UTF-8 symbols.
additive-symbols

Define the additive tuple of the additive system.

An additive counter system (such as Roman numerals) is composed 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 descriptor 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 alternative style if the counter value is out of range.
pad

If the marker indicates that the minimum length must be present, use this descriptor.

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

For counters with values 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 prompts.
fallback

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

If an alternative counter or an alternative 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 this @ rule.

Chrome Edge Firefox Safari Opera
91 91 33 17 77