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

Question

[Эдуард Валеев]

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



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

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,".") ". "; 
}

Непонятно, как быть если вложений в списке больше одного, как на скриншоте.

Answer 1

[Сергей delphinpro]

Вот так

ol#politika, ol#politika ol {
  list-style: none; 
  counter-reset: li; 
}
ol#politika li:before {
  counter-increment: li; 
  content: counters(li,".") ". "; 
}