Regla @counter-style CSS

Definición y uso

CSS @counter-style La regla se utiliza para definir estilos de contador personalizados.

Cuando el estilo predefinido no cumple con las necesidades:@counter-style La regla permite definir su propio estilo de contador.

Ejemplo

Especificar un estilo de contador personalizado para la lista:

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

Prueba personalmente

Sintaxis CSS

@counter-style countername {
  uno o más descriptores
{}

Valor del atributo

Valor Descripción
countername

Define el nombre sensible a mayúsculas y minúsculas del estilo del contador.

Nota: el nombre del contador no puede ser: none, decimal, disc, square, circle, disclosure-open o disclosure-closed.
system

Define el algoritmo que convierte el valor entero del contador en una cadena.

Es necesario si el sistema se establece en: cyclic, numeric, alphabetic, symbolic o fixed,则需要 symbols 描述符。

Es necesario si el sistema se establece en: additive,则需要 additive-symbols 描述符。
symbols

Define los símbolos utilizados para las marcas (pueden ser cadenas, imágenes o identificadores personalizados).

Es necesario si el descriptor system se establece en cyclic, numeric, alphabetic, symbolic o fixed.

Símbolos UTF-8 de HTML.
additive-symbols

Define el tupla aditiva del sistema aditivo.

El sistema de contador aditivo (como los números romanos) se compone de una serie de símbolos con peso.

La lista de símbolos del contador es una lista ordenada por peso descendente de los símbolos del sistema de suma y sus enteros no negativos como peso.

Es necesario si el descriptor system se establece en additive.
negative Define el símbolo de prefijo o sufijo que debe adjuntarse cuando el valor es negativo.
prefix Define el símbolo de prefijo que debe adjuntarse a la representación de la marca.
suffix Define el símbolo de sufijo que debe adjuntarse a la representación de la marca.
range

Define el rango de valores del estilo del contador.

Si el valor del contador está fuera de rango, se retrocede a su estilo alternativo.
pad

Si la marca indica que debe tener una longitud mínima, utilice este descriptor.

Por ejemplo, si desea que el contador comience en 01 y luego sea 02, 03, 04, etc., utilice el descriptor pad.

Para los contadores que son mayores que el valor especificado de pad, la marca se construirá normalmente.
speak-as

Define cómo debe leer el sintetizador de voz el estilo del contador.

Por ejemplo, para las listas ordenadas, se lee como número o letra; para las listas no ordenadas, se lee como indicación auditiva.
fallback

Define el nombre del contador de retroceso cuando el sistema no puede construir la marca o está fuera del rango especificado.

Si no se describe un contador alternativo o el sistema alternativo no puede representar el valor del contador, se retrocede al estilo decimal.

Adopción del navegador

Los números en la tabla indican la primera versión del navegador que completamente admite la @ regla.

Chrome Edge Firefox Safari Opera
91 91 33 17 77