Adward
@Adward
Вебмастер с 2001 года

Как создавть многоуровневые нумерованный список в css?

Начну с фотографии

5b2833dbbca0e738414224.png

если список двухуровневый, то вполне работает такая конструкция:

ol#politika {
	list-style: none; 
	/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ 
	counter-reset: li; 
}
ol#politika li:before {
	/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */
	counter-increment: li; 
	/* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */
	content: counters(li,".") ". "; 
}


Непонятно, как быть если вложений в списке больше одного, как на скриншоте.
  • Вопрос задан
  • 327 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Вот так
ol#politika, ol#politika ol {
  list-style: none; 
  counter-reset: li; 
}
ol#politika li:before {
  counter-increment: li; 
  content: counters(li,".") ". "; 
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы