Трехуровневый десятичного упорядоченный список CSS

Question

У меня есть три уровня упорядоченный список на языке HTML, который я хотел бы дать стиль следующим образом:

1. Item 1 
1.1 Item 2 
1.1.1 Item 3 

Пример HTML в следующем plunker:

http://plnkr.co/edit/DqhZ5pJILTUHGSNaA1vm?p=preview

Я сделал стиль, рекомендованный в Интернете с помощью CSS, как

ol { counter-reset: item } 
li:before { content: counters(item, "."); counter-increment: item } 

, но он не работает.

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

Answer 1

код CSS почти отлично, см http://plnkr.co/edit/wmGhz7V6CKqZ7MmHIoDF?p=preview

у вас есть дополнительный </li><li> после уровня 1, так что разметка становится

<ol> 
    <li> Should be Item 1 
     <ol> 
      <li> Should be Item 1.1</li> 
      <li> Should be Item 1.2</li> 
      <li> Should be Item 1.3 
       <ol> 
        <li> Should be Item 1.3.1</li> 
       </ol> 
      </li> 
      <li>Should be Item 1.4</li> 
     </ol> 
    </li> 
    <li> Should be Item 2</li> 
</ol> 

и в вашем CSS я удалил стиль базового списка для ol с list-style: none;

Answer 2

Используйте следующий код:

HTML:

<ol> 
    <li> Should be Item 1   
     <ol> 
     <li> Should be Item 1.1</li> 
     <li> Should be Item 1.2</li> 
     <li> Should be Item 1.3 
      <ol> 
      <li> Should be Item 1.3.1 
      </ol> 
     <li>Should be Item 1.4</li> 
     </ol> 
    </li> 
    <li> Should be Item 2</li> 
    </ol> 

CSS:

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