Reguła @counter-style CSS

Definicja i użycie

CSS @counter-style Reguła służy do definiowania niestandardowych stylów liczników.

Gdy zaprojektowane przez nasz zespół style nie odpowiadają potrzebom:@counter-style Reguła pozwala na zdefiniowanie własnego stylu licznika.

Przykład

Ustal niestandardowy styl licznika listy:

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

Spróbuj osobiście

Gramatyka CSS

@counter-style countername {
  jeden lub więcej deskryptorów
}

Wartość atrybutu

Wartość Opis
countername

Definiuj wrażliwy na wielkość liter nazwę stylu licznika.

Uwaga: nazwa licznika nie może być: none, decimal, disc, square, circle, disclosure-open lub disclosure-closed.
system

Definiuj algorytm, który konwertuje wartość liczbową licznika na ciąg znaków.

Wymagane, jeśli system jest ustawiony na cyclic, numeric, alphabetic, symbolic lub fixed,则需要 symbols deskryptor.

Wymagane, jeśli system jest ustawiony na additive,则需要 additive-symbols deskryptor.
symbols

Definiuj znaki używane do znaczników (może to być ciąg znaków, obraz lub niestandardowy identyfikator).

Wymagane, jeśli deskryptor system jest ustawiony na cyclic, numeric, alphabetic, symbolic lub fixed.

Znaki UTF-8 HTML.
additive-symbols

Definiuj dodawczy zestaw znaków systemu.

Dodawczy system licznika (np. cyfry rzymskie) składa się z serii znaków o wadze.

Lista znaczników licznika posortowanych w kolejności malejącej według wagi oraz ich nieujemnych liczbowych wag.

Wymagane, jeśli deskryptor system jest ustawiony na additive.
negative Definiuj znak, który należy dodać jako prefiks lub przyrostek do reprezentacji znacznika, gdy wartość jest ujemna.
prefix Definiuj znak, który należy dodać jako prefiks do reprezentacji znacznika.
suffix Definiuj znak, który należy dodać jako przyrostek do reprezentacji znacznika.
range

Definiuj zakres wartości stylu licznika.

Jeśli wartość licznika wykracza poza zakres, przejdź do alternatywnego stylu.
pad

Użyj tego deskryptora, jeśli znacznik oznacza, że musi mieć minimalną długość.

Na przykład, jeśli chcesz, aby licznik zaczynał się od 01, a następnie 02, 03, 04 itp., użyj deskryptora pad.

Dla liczników większych niż określona wartość pad, znacznik będzie normalnie budowany.
speak-as

Definiuj, jak syntezator mowy powinien czytać styl licznika.

Na przykład, dla uporządkowanej listy, czytaj jako liczby lub litery; dla niesporządkowanej listy, czytaj jako sygnał dźwiękowy.
fallback

Definiuj nazwę licznika, do której należy przejść, jeśli system nie może zbudować znacznika lub wyjść poza określony zakres.

Jeśli nie opisano alternatywnego licznika lub alternatywny system nie może wyrazić wartości licznika, przejdź do stylu dziesiętnego.

Obsługa przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która całkowicie obsługuje to @ regułę.

Chrome Edge Firefox Safari Opera
91 91 33 17 77