Counter reset css: CSS counter-reset property

Leave a Comment / Css / By /

counter-reset | 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-reset

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает идентификатор, в котором будет храниться счётчик отображений определенного элемента, а также начальное значение счётчика. Такой счётчик может выводиться с помощью свойства content и псевдоэлементов :after и :before.

Синтаксис

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

Значения

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

Задаёт одну или несколько переменных, в которых будет храниться значение счётчика. Значения разделяются между собой пробелом.
целое число
Начальное значение каждого идентификатора. По умолчанию равно 0.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>counter-reset</title>
  <style>
   li { list-style-type: none; } /* Убираем исходную нумерацию у списка */
   ol { counter-reset: list1; } /* Инициируем счетчик */
   ol li:before {
    counter-increment: list1; /* Увеличиваем значение счетчика */
    content: counter(list1) ". "; /* Выводим число */
   }
   ol ol { counter-reset: list2; } /* Инициируем счетчик вложенного списка */
   ol ol li:before {
    counter-increment: list2; /* Увеличиваем значение счетчика вложенного списка */
    content: counter(list1) "." counter(list2) ".
 
  "; /* Выводим число */
   }
  </style>
 </head>
 <body>
  <ol>
   <li>Пункт
    <ol>
     <li>Подпункт</li>
     <li>Подпункт</li>
     <li>Подпункт</li>
    </ol>
   </li>
   <li>Пункт
    <ol>
     <li>Подпункт</li>
     <li>Подпункт</li>
    </ol>
   </li>
  </ol>
 </body>
</html>

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

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

Примечание

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

Контент

CSS по теме

  • counter-reset

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

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

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

Рецепты CSS

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

counter-reset | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Пример
    • Примечание
    • Спецификация
    • Браузеры

Устанавливает переменную, в которой будет храниться счётчик отображений определенного элемента, а также начальное значение счётчика. Такой счётчик может выводиться с помощью свойства content и псевдоэлементов ::after и ::before.

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

Синтаксис 

counter-reset: [<переменная> | <число>?]+ | none

Обозначения

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

Значения

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

Задаёт одну или несколько переменных, в которых будет храниться значение счётчика. Значения разделяются между собой пробелом.
<число>
Начальное значение каждого идентификатора. По умолчанию равно 0.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>counter-reset</title> <style> li { list-style-type: none; } /* Убираем исходную нумерацию у списка */ ol { counter-reset: list1; } /* Инициируем счетчик */ ol li:before { counter-increment: list1; /* Увеличиваем значение счетчика */ content: counter(list1) «. «; /* Выводим число */ } ol ol { counter-reset: list2; } /* Инициируем счетчик вложенного списка */ ol ol li:before { counter-increment: list2; /* Увеличиваем значение счетчика вложенного списка */ content: counter(list1) «.» counter(list2) «. «; /* Выводим число */ } </style> </head> <body> <ol> <li>Пункт <ol> <li>Подпункт</li> <li>Подпункт</li> <li>Подпункт</li> </ol> </li> <li>Пункт <ol> <li>Подпункт</li> <li>Подпункт</li> </ol> </li> </ol> </body> </html>

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

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

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

Объект.style.counterReset

Примечание

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

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

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

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

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

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

Браузеры

81229.231
2.119.53

Браузеры

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

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

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

Контент

См. также

  • content
  • counter-increment

Рецепты

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 20.09.2018

Редакторы: Влад Мержевич

Свойство сброса счетчика CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

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

:

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

}

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

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

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

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

Свойство counter-reset создает или сбрасывает один или несколько счетчиков CSS.

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

Значение по умолчанию: нет
Унаследовано: нет
Анимация: нет. Читать про анимированный
Версия: CSS2
Синтаксис JavaScript: объект .style.counterReset=»section» Попытайся

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

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

Собственность
сброс счетчика 4,0 8,0 2,0 3. 1 9,6

Синтаксис CSS

counter-reset: none| номер имени |начальный|наследовать;

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

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

Дополнительные примеры

Пример

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

:

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

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

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

Пример

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

тело {
   /* Установить «раздел» равным 0 */
сброс счетчика: раздел;
}

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

h2::before {
  /* Увеличение раздела на 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-increment

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

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

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


ПИКЕР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

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

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

ФОРУМ | О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

сброс счетчика | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство counter-reset позволяет автоматически нумеровать элементы. Подобно элементу упорядоченного списка (

    ).

     артикул {
  сброс счетчика: раздел;
}
раздел {
  счетчик-инкремент: раздел;
}
раздел h3: перед {
  содержание: счетчик(раздел) '. ';
}

    Свойство counter-reset используется для сброса счетчика CSS до заданного значения.

    Это часть модуля счетчика CSS, который является частью спецификации CSS2.1 сгенерированного контента, автоматической нумерации и списков, расширенной в спецификации CSS3 модуля сгенерированного и замененного контента.

    Синтаксис 

     counter-reset: [ ?]+ | none

    Где…

    •  это имя счетчика, который вы хотите сбросить
    •  это значение для сброса счетчика на
    • нет  отключить счетчик
     body {
  сброс счетчика: мой потрясающий счетчик 0;
}

    Примечание: значение по умолчанию для целого числа равно 0. Если после имени счетчика не задано целое число, оно будет сброшено на 0. Таким образом, это работает так, как ожидалось:

     body {
  сброс счетчика: мой потрясающий счетчик;
}

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

     тело {
  сброс счетчика: мой-удивительный-счетчик 5 мой-другой-счетчик;
}

    Это сбросит мой удивительный счетчик на 5 и мой другой счетчик на значение по умолчанию: 0.

    Вы можете увидеть этот список как: counter1 value1 counter2 value2 counter3 value3 ... . Если значение опущено, оно равно 0.

    Demo

    В следующей демонстрации article сбрасывает счетчик раздела до значения по умолчанию (0), которое затем увеличивается при каждом появлении раздела, а затем отображается перед разделом. заголовки.

    Browser support

    Desktop
    Chrome Firefox IE Edge Safari
    4 2 8 12 3. 1

    Мобильный телефон/планшет
    Android Chrome Android Firefox Android iOS Safari
    107 106 2.1 3.2

    Дополнительная информация

    • Уровень модуля сгенерированного содержимого CSS 3
    3 Документация MDN

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

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