система

Это может принимать одну из трёх форм:

• Одно из ключевых значений cyclic, numeric, alphabetic, symbolic, additive, или fixed.
• Ключевое значение fixed вместе с целым числом.
• Ключевое значение extends вместе со значением <counter-style-name>.

Значения включают:

cyclic

Циклически перебирает список символов, указанный в описании symbols. По достижении конца списка, цикл возвращается к началу и начинается заново. Это значение полезно как для простых стилей с одним символом, так и для стилей с несколькими символами. В описании symbols должен быть указан хотя бы один символ, в противном случае стиль счётчика недействителен.

numeric

Рассматривает символы счётчика как цифры в системе счисления с позиционным значением. Система счисления аналогична системе alphabetic, описанной выше. Основное различие заключается в том, что в системе alphabetic, первый символ счётчика, указанный в описании symbols интерпретируется как 1, следующий как 2, и так далее. Однако в системе счисления, первый символ счётчика интерпретируется как 0, следующий как 1, затем 2, и так далее.

В описании symbols должно быть указано по крайней мере два символа счётчика, иначе стиль счётчика недействителен.

alphabetic

Интерпретирует указанные символы как цифры, в алфавитной системе счисления. Если символы "a" до "z" указаны как символы в стиле счётчика, с системой alphabetic, то первые 26 представлений счётчика будут "a", "b" вплоть до "z". До этого момента поведение аналогично поведению системы symbolic, описанной выше. Однако после "z", это продолжится как "aa", "ab", "ac"…

Описание symbols должно содержать по крайней мере два символа, в противном случае стиль счётчика недействителен. Первый символ счётчика, указанный в описании symbols интерпретируется как 1, следующий как 2, и так далее. Эта система также строго определена для положительных значений счётчика.

symbolic

Циклически перебирает символы, указанные в описании symbols списка, многократно, удваивая, утраивая и так далее, символы на каждом последующем проходе по списку. Например, если два символа "◽" и "◾" указаны в описании symbols , на каждом последующем проходе они станут "◽◽" и "◾◾", затем "◽◽◽" и "◾◾◾", и так далее на последующих проходах. В описании symbols должен быть указан хотя бы один символ, иначе стиль счётчика недействителен. Эта система счётчика работает только для положительных значений счётчика.

additive

Используется для представления систем счисления «знак-значение», таких как римские цифры, которые вместо повторного использования цифр в разных позициях для получения различных значений, определяют дополнительные цифры для больших значений. Значение числа в такой системе можно найти, сложив цифры в числе.

Дополнительное описание, называемое additive-symbols , должно быть указано с по крайней мере одной аддитивной кортежем, в противном случае правило стиля счётчика будет недействительным. Аддитивная кортеж аналогичен составному символу счётчика, который состоит из двух частей: обычного символа счётчика и неотрицательного целого веса. Аддитивные кортежи должны быть указаны в порядке убывания их весов, иначе система недействительна.

fixed или fixed <integer>

Определяет конечный набор символов, один раз перебирая список символов, указанный в описании symbols . После того, как указанные символы будут пройдены, используется резервный стиль счётчика. Это ключевое слово полезно в случаях, когда значения стиля счётчика конечны. В описании symbols должен быть указан хотя бы один символ, в противном случае стиль счётчика недействителен. Ключевое слово fixed может быть дополнено необязательным значением <integer>. Если указано, значение <integer> указывает элемент в списке, который получит первый символ из списка символов. Если опущен, значение по умолчанию integer равно 1, что даёт первому элементу списка первый символ.

extends

Расширяет алгоритм другого, определённого браузером или автором, стиля счётчика, позволяя изменить некоторые аспекты расширенного стиля счётчика. Любые неопределённые описания и их значения наследуются от указанного расширенного стиля счётчика. Если имя стиля счётчика, указанное с помощью extends ещё не определено, то стиль счётчика decimal будет расширен по умолчанию.

Он не должен содержать описания symbols или additive-symbols, иначе правило стиля счётчика будет недействительным. Если одно или несколько определений стилей счётчика образуют цикл со своими значениями extends, браузер будет рассматривать все участвующие стили счётчика как расширяющие стиль decimal.

system = 
  cyclic                            |
  numeric                           |
  alphabetic                        |
  symbolic                          |
  additive                          |
  [ fixed <integer>? ]              |
  [ extends <counter-style-name> ]  

Значение cyclic перебирает список символов, повторяя список при необходимости:

CSS

@counter-style fisheye {
  system: cyclic;
  symbols: ◉ ➀;
  suffix: ": ";
}

ul {
  list-style: fisheye;
}

Результат

Значение fixed перебирает список символов только один раз, начиная с цикла на элементе списка, указанном значением integer:

CSS

@counter-style circled-digits {
  system: fixed 3;
  symbols: ➀ ➁ ➂;
  suffix: ": ";
}

ul {
  list-style: circled-digits;
}

Результат

Значение symbolic циклически перебирает список, определённый в описании symbols , удваивая и утраивая количество символов для второго и третьего циклов соответственно:

CSS

@counter-style abc {
  system: symbolic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

Результат

CSS

@counter-style abc {
  system: alphabetic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

Результат

Первый символ, указанный в описателе symbols, интерпретируется как 0 здесь.

CSS

@counter-style abc {
  system: numeric;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

Результат

Как показано в следующем примере, если цифры от 0 до 9 указаны в качестве символов, этот стиль счётчика будет отображать символы так же, как и десятичный стиль счётчика.

CSS

@counter-style numbers {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ".";
}

ul {
  list-style: numbers;
}

Результат

Этот пример отображает список с использованием римских цифр. Обратите внимание, что указан range. Это потому, что представление будет генерировать правильные римские цифры только до значения счётчика 3999. При выходе за пределы диапазона остальные представления счётчика будут основаны на стиле decimal, который является резервным вариантом. Если вам нужно отображать значения счётчика как римские цифры, вы можете использовать один из предопределённых стилей счётчика, upper-roman или lower-roman, вместо того, чтобы самостоятельно создавать правило.

HTML

Мы используем атрибут start элемента <ol>, чтобы продемонстрировать, что счёт может не начинаться с 1. Кроме того, мы используем атрибут value пятого элемента <li>, чтобы продемонстрировать, что счётчики, определённые с помощью @counter-style, ведут себя так же, как и собственные счётчики.

<ol start="48">
  <li>48</li>
  <li>49</li>
  <li>50</li>
  <li>51</li>
  <li value="109">109</li>
  <li>110</li>
  <ol></ol>
</ol>

CSS

@counter-style uppercase-roman {
  system: additive;
  range: 1 3999;
  additive-symbols:
    1000 M,
    900 CM,
    500 D,
    400 CD,
    100 C,
    90 XC,
    50 L,
    40 XL,
    10 X,
    9 IX,
    5 V,
    4 IV,
    1 I;
}

ol {
  list-style: uppercase-roman;
  padding-left: 5em;
}

Результат

В этом примере используется алгоритм, символы и другие свойства lower-alpha, одного из нескольких встроенных list-style-type счётчиков, но расширяет его путём удаления точки ('.') после представления счётчика и заключения символов в скобки, как в (a) и (b).

HTML

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

@counter-style alpha-modified {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}

ul {
  list-style: alpha-modified;
}

Результат

• Другие @counter-style описатели, включая symbols, additive-symbols, negative, prefix, suffix, range, pad, speak-as и fallback
• list-style, list-style-image, list-style-position
• symbols(), функциональное обозначение, создающее анонимные стили счётчика.