римские цифры на упорядоченном не работают из-за CSS

Question

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

1. 
    1.1 
    1.2 
2. 
    2.1 
    2.2 

У меня он работает в скрипке.

Fiddle

Проблема заключается в том, когда я изменить тип ol для римских цифр type="I" он не работает из-за CSS я добавил.

<ol type="I"> 
    <li>Elemento primero 
     <ol type="I"> 
      <li>Subelemento primero</li> 
      <li>Subelemento segundo</li> 
     </ol> 
    </li> 
    <li>elemento segundo</li> 
</ol> 
    <ol type="I"> 
     <li>Subelemento primero</li> 
     <li>Subelemento segundo</li> 
    </ol> 

CSS:

OL { 
    counter-reset: item 
} 
LI { 
    display: block 
} 
LI:before { 
    content: counters(item, ".")" "; 
    counter-increment: item 
} 

Answer 1

Вы используете счетчики CSS, чтобы отобразить вложенную нумерацию и в отличие от по умолчанию ol, выходной формат не меняется с атрибутом type="I". Вы должны установить формат вывода счетчика в явном виде. По умолчанию выходной формат - десятичные числа, но все стили, доступные для свойства list-style-type, также доступны для счетчиков (Источник: W3C Spec).

Это может быть достигнуто путем пропускания upper-roman (эквивалент) или type="I"lower-roman (эквивалент type="i") в качестве одного из значений параметра функции counters() или counter().

OL { 
 
    counter-reset: item 
 
} 
 
LI { 
 
    display: block 
 
} 
 
LI:before { 
 
    content: counters(item, ".", upper-roman)" "; 
 
    counter-increment: item; 
 
}

<ol type="I"> 
 
    <li>Elemento primero 
 
    <ol type="I"> 
 
     <li>Subelemento primero</li> 
 
     <li>Subelemento segundo</li> 
 
    </ol> 
 
    </li> 
 
    <li>elemento segundo</li> 
 
</ol> 
 
<ol type="I"> 
 
    <li>Subelemento primero</li> 
 
    <li>Subelemento segundo</li> 
 
</ol>

Answer 2

Здесь вы идете - вы просто необходимо, чтобы установить содержание как верхний римскими.

OL { 
    counter-reset: section; 
} 
LI { 
    display: block; 
    counter-reset: number; 
} 
LI:before { 
    counter-increment: section; 
    content: "Section " counter(section, upper-roman) ". "; 
}