Css counter increment: Using CSS counters — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

counter-increment | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
8.0+2.0+9.2+3.0+1.0+2.1+2.0+

Краткая информация

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Стилевое свойство counter-increment предназначено для увеличения значения счётчика приращений, который задается свойством counter-reset. Такой счётчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов :after и :before. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили.

Синтаксис

counter-increment: none | inherit | идентификатор | целое число

Значения

none
Запрещает увеличение счетчика для текущего селектора.
inherit
Наследует значение родителя.
идентификатор

Задает одну или несколько переменных, для которых требуется изменить значение счетчика. Переменные разделяются между собой пробелом.
целое число
Определяет значение приращения счетчика. По умолчанию оно равно 1. Допускается использовать отрицательные и нулевые значения.

Возможные сочетания значений свойств counter-reset и counter-increment показаны в табл. 1.

Табл. 1. Изменение нумерации списка
КодРезультат
LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list;
content: counter(list) «. «;
}

Список начинается с нуля.

0, 1, 2

LI { list-style-type: none; }
OL { counter-reset: list; }
LI:before {
counter-increment: list 2;
content: counter(list) «. «;
}

Выводятся все четные числа.

2, 4, 6

LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list list;
content: counter(list) «. «;
}

Выводятся все нечетные числа.

1, 3, 5

LI { list-style-type: none; }
OL { counter-reset: list 9; }
LI:before {
counter-increment: list;
content: counter(list) «. «;
}

Список начинается с 10.

10, 11, 12

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>counter-increment</title>
  <style>
   body {
    counter-reset: heading; /* Инициируем счетчик */
   }
   h3:before {
    counter-increment: heading; /* Указываем идентификатор счетчика */
    content: "Глава " counter(heading) ".
  "; /* Выводим текст перед содержимым тега <h3> */
   }
  </style>
 </head>
 <body>
  <h3>Теория ловли льва в пустыне</h3>
  <h3>Методы инверсной кинематики</h3>
  <h3>Ловля льва численными методами</h3>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства counter-increment

Примечание

Для элементов, у которых установлено display: none, значение счётчика не меняется.

Контент

CSS по теме

  • counter-increment

Статьи по теме

  • Начинаем работать с CSS-счётчиками

Статьи по теме

Рецепты CSS

  • Как изменить вид написания чисел в списке и сделать, чтобы после каждого номера шла круглая скобка?
  • Как изменить стиль чисел в списке?
  • Как сделать нумерацию с определенного числа через стили?

counter-increment | WebReference

Стилевое свойство counter-increment предназначено для увеличения значения счётчика приращений, который задается свойством counter-reset. Такой счётчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов ::after и ::before. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили.

Краткая информация

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис

counter-increment: [<переменная> | <число>?]+ none
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным. inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

none
Запрещает увеличение счётчика для текущего селектора.
<переменная>

Задаёт одну или несколько переменных, для которых требуется изменить значение счётчика. Переменные разделяются между собой пробелом.
<число>
Определяет значение приращения счётчика. По умолчанию оно равно 1. Допускается использовать только положительные целые числа, отрицательные целые числа и ноль.

Возможные сочетания значений свойств counter-reset и counter-increment показаны в табл. 1.

Табл. 1. Изменение нумерации списка
КодРезультат
li { list-style-type: none; }
ol { counter-reset: list -1; }
li::before {
  counter-increment: list;
  content: counter(list) ". ";
}

Список начинается с нуля.

0, 1, 2

li { list-style-type: none; }
ol { counter-reset: list; }
li::before {
  counter-increment: list 2;
  content: counter(list) ". ";
}

Выводятся все чётные числа.

2, 4, 6

li { list-style-type: none; }
ol { counter-reset: list -1; }
li::before {
  counter-increment: list list;
  content: counter(list) ".  ";
}

Выводятся все нечётные числа.

1, 3, 5

li { list-style-type: none; }
ol { counter-reset: list 9; }
li::before {
  counter-increment: list;
  content: counter(list) ". ";
}

Список начинается с 10.

10, 11, 12

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>counter-increment</title> <style> body { counter-reset: heading; /* Инициируем счетчик */ } h3:before { counter-increment: heading; /* Указываем идентификатор счетчика */ content: «Глава » counter(heading) «. «; /* Выводим текст перед содержимым тега <h3> */ } </style> </head> <body> <h3>Теория ловли льва в пустыне</h3> <h3>Методы инверсной кинематики</h3> <h3>Ловля льва численными методами</h3> </body> </html>

Результат данного примера показан на рис.

1.

Рис. 1. Применение свойства counter-increment

Объектная модель

Объект.style.counterIncrement

Примечание

Для элементов, у которых установлено display: none, значение счётчика не меняется.

Спецификация

СпецификацияСтатус
CSS Lists and Counters Module Level 3Рабочий проект
CSS Level 2 (Revision 1)Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

81229.231
2.119.53
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Контент

См. также

  • content
  • counter-reset

Рецепты

  • Как изменить стиль чисел в списке?
  • Как убрать точки у чисел списка?

counter-increment — CSS: каскадные таблицы стилей

Свойство CSS counter-increment увеличивает или уменьшает значение счетчика CSS на заданное значение.

Примечание: Значение счетчика может быть сброшено на произвольное число с помощью CSS-свойства counter-reset .

 /* Увеличить "мой-счетчик" на 1 */
приращение счетчика: мой-счетчик;
/* Уменьшить "мой-счетчик" на 1 */
приращение счетчика: мой-счетчик -1;
/* Увеличить "счетчик1" на 1 и уменьшить "счетчик2" на 4 */
приращение счетчика: счетчик1 счетчик2 -4;
/* Ничего не увеличивать/уменьшать: используется для переопределения менее конкретных правил */
счетчик-инкремент: нет;
/* Глобальные значения */
счетчик-инкремент: наследовать;
счетчик-инкремент: начальный;
счетчик-приращение: вернуться;
счетчик-приращение: обратный уровень;
приращение счетчика: не установлено;

Свойство counter-increment указывается одним из следующих способов:

  • имя счетчика, за которым может следовать . Вы можете указать столько счетчиков для увеличения, сколько хотите, с каждым именем или парой имя-число, разделенной пробелом.
  • Значение ключевого слова
    нет     .

Значения

<пользовательский идентификатор>

Имя счетчика для увеличения.

<целое число>

Значение для добавления к счетчику. По умолчанию 1 , если не указано иное.

нет

Нет необходимости увеличивать счетчик. Это используется как значение по умолчанию или для отмены приращения в более конкретных правилах.

Исходное значение нет
Applies to all elements
Inherited no
Computed value as specified
Animation type discrete
 counter-increment =  
 [  <целое число>? ]+ | 
 нет

Увеличение именованных счетчиков 

 h2 {
  счетчик-приращение: глава, раздел 2, страница;
  /* Увеличивает значение счетчиков глав и страниц на 1,
     а счетчик секций на 2 */
}
7 B 900 таблицы в браузере с включенной загрузкой только CD. Включите JavaScript для просмотра данных.

  • Использование счетчиков CSS
  • сброс счетчика
  • счетчик
  • @встречный стиль
  • Счетчик () и счетчики() функции

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

Свойство счетчика приращения CSS

❮ Предыдущий Полное руководство по CSS Следующий ❯


Пример

Создайте счетчик («my-sec-counter») и увеличивайте его на единицу для каждого появление селектора

:

body {
  /* Устанавливаем «my-sec-counter» в 0 */
сброс счетчика: мой счетчик секунд;
}

h3::before {
/* Увеличить «my-sec-counter» на 1 */
  counter-increment: мой счетчик секунд;
  content: «Раздел» counter(my-sec-counter) «. «;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство counter-increment увеличивает или уменьшает значение одного или больше счетчиков CSS.

Свойство counter-increment обычно используется вместе с свойство counter-reset и свойство свойство содержания.

Спецификация
Модуль списков и счетчиков CSS Уровень 3
# increment-set
Значение по умолчанию: нет
Унаследовано: нет
Анимация: нет. Читать о анимированный
Версия: CSS2
Синтаксис JavaScript: объект .style.counterIncrement = «подраздел»; Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Недвижимость
счетчик приращений 4,0 8,0 2,0 3. 1 9,6

Синтаксис CSS

counter-increment: none| id |начальный|наследовать;

Значения свойств

.
Значение Описание
нет Значение по умолчанию. Счетчики не будут увеличиваться
идентификационный номер id определяет, какой счетчик увеличивать. Число устанавливает, на сколько счетчик будет увеличиваться при каждом появлении селектора. Шаг по умолчанию равен 1. Допускаются отрицательные значения. Если id относится к счетчику, который не был инициализирован сбросом счетчика, начальное значение по умолчанию равно 0
начальный Устанавливает для этого свойства значение по умолчанию. Читать о инициал
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Другие примеры

Пример

Создайте счетчик («my-sec-counter») и уменьшите его на единицу для каждого появление селектора

:

body {
  /* Устанавливаем «my-sec-counter» в 0 */
сброс счетчика: мой счетчик секунд;
}

h3::before {
  /* Уменьшить значение «my-sec-counter» на 1 */
  счетчик приращения: мой счетчик секунд -1;
  содержание: «Раздел» counter(my-sec-counter) «. «;
}

Попробуйте сами »

Пример

Нумерация разделов и подразделов с «Раздел 1:», «1.1», «1.2» и т. д.:

тело {
   /* Установите для параметра section значение 0 */
  counter-reset: section;
}

h2 {
   /* Установить для «подраздела» значение 0 */
  counter-reset: subsection;
}

h2::before {
  /* Увеличение «section» на 1 */
счетчик-инкремент: раздел;
content: «Раздел » counter(section) «: «;
}

h3::before {
  /* Увеличение «подраздела» на 1 */
счетчик-инкремент: подраздел;
содержание: счетчик(раздел) «. » счетчик(подраздел) » «;
}

Попробуйте сами »

Пример

Создайте счетчик и увеличьте его на единицу (используя римские цифры) для каждого появление селектора

:

body {
  /* Установить «my-sec-counter» на 0 */
  сброс счетчика: мой счетчик секунд;
}

h3::before {
/* Увеличить «my-sec-counter» на 1 */
  counter-increment: мой счетчик секунд;
  content: counter(my-sec-counter, верхний роман) «. «;
}

Попробуйте сами »

Связанные страницы

Справочник CSS: ::before псевдоэлемент

Ссылка CSS: ::after псевдоэлемент

Справочник CSS: свойство content

Ссылка CSS: свойство counter-reset

Функции CSS: функция counter()

Ссылка HTML DOM: свойство counterIncrement

❮ Предыдущая Полное руководство по CSS Следующий ❯


НАБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *