CSS
Счетчики

Синтаксис

• counter-set: [<counter-name> <integer>? ] + | никто

• counter-reset: [<counter-name> <integer>? ] + | никто

• counter-increment: [<counter-name> <integer>? ] + | никто

• counter (<counter-name> [, <counter-style>]?)

• счетчики (<counter-name>, <connector-string> [, <counter-style>]?)

параметры

замечания

Применение стилей римских цифр к выходу счетчика

CSS

body {
  counter-reset: item-counter;
}

.item {
  counter-increment: item-counter;
}

.item:before {
  content: counter(item-counter, upper-roman) ". "; /* by specifying the upper-roman as style the output would be in roman numbers */
}

HTML

<div class='item'>Item No: 1</div>
<div class='item'>Item No: 2</div>
<div class='item'>Item No: 3</div>

В приведенном выше примере вывод счетчика будет отображаться как I, II, III (римские числа) вместо обычных 1, 2, 3, поскольку разработчик явно указал стиль счетчика.

Количество каждого элемента с помощью счетчика CSS

CSS

body {
  counter-reset: item-counter; /* create the counter */
}
.item {
  counter-increment: item-counter; /* increment the counter every time an element with class "item" is encountered */
}
.item-header:before {
  content: counter(item-counter) ". "; /* print the value of the counter before the header and append a "." to it */
}

/* just for demo */

.item {
  border: 1px solid;
  height: 100px;
  margin-bottom: 10px;
}
.item-header {
  border-bottom: 1px solid;
  height: 40px;
  line-height: 40px;
  padding: 5px;
}
.item-content {
  padding: 8px;
}

HTML

<div class='item'>
  <div class='item-header'>Item 1 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
  <div class='item-header'>Item 2 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
  <div class='item-header'>Item 3 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>

В приведенном выше примере номера каждого элемента отображаются на странице и добавляется номер элемента перед его заголовком (с использованием свойства content элемента .item-header :before псевдо). Живая демонстрация этого кода доступна здесь .

Внедрение многоуровневой нумерации с помощью счетчиков CSS

CSS

ul {
  list-style: none;
  counter-reset: list-item-number; /* self nesting counter as name is same for all levels */
}
li {
  counter-increment: list-item-number;
}
li:before {
  content: counters(list-item-number, ".") " "; /* usage of counters() function means value of counters at all higher levels are combined before printing */
}

HTML

<ul>
  <li>Level 1
    <ul>
      <li>Level 1.1
        <ul>
          <li>Level 1.1.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 2
    <ul>
      <li>Level 2.1
        <ul>
          <li>Level 2.1.1</li>
          <li>Level 2.1.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 3</li>
</ul>

Вышеприведенный пример многоуровневой нумерации с использованием счетчиков CSS. Он использует самонастраивающуюся концепцию счетчиков. Self nesting - это понятие, в котором, если элемент уже имеет счетчик с заданным именем, но ему необходимо создать другое, он создает его как дочерний элемент существующего счетчика. Здесь второй уровень ul уже наследует счетчик list-item-number из его родительского list-item-number но затем должен создать свой собственный номер list-item-number (для его дочерних list-item-number li ) и поэтому создает номер list-item-number[1] (счетчик для второй уровень) и устанавливает его под list-item-number[0] (счетчик для первого уровня). Таким образом, он достигает многоуровневой нумерации.

Выход выводится с использованием функции counters() вместо функции counter() потому что функция counters() предназначена для префикса значения всех счетчиков более высокого уровня (родительского) при печати результата.