Форматирование списков HTML

Question

У меня есть это:

<ol type="1">
   <li>
      List Item 1
      <ol>
         <li>
            Nested Item 1.1
         </li>
         <li>
            Nested Item 1.2
         </li>
      </ol>
   </li>
   <li>
      List Item 2
   </li>
</ol>

и я хочу, чтобы оно было напечатано так:

Answer 1

С вашим точным HTML, вы хотите это:

ol[type="1"] {counter-reset:outer 0}
ol[type="1"] > li {counter-increment:outer}
ol[type="1"] ol {counter-reset:inner 0}
ol[type="1"] ol > li {list-style:none; counter-increment:inner}
ol[type="1"] ol > li::before {content:counter(outer) "." counter(inner)}

См. jsFiddle для рабочего примера.

Answer 2

стиль:

#ext-ol ol{
    padding-left:40px;
}​

HTML:

<ol type="1" id="ext-ol">
   <li>
      List Item 1
      <ol id="int-ol">
         <li>
            Nested Item 1.1
         </li>
         <li>
            Nested Item 1.2
         </li>
      </ol>
   </li>
   <li>
      List Item 2
   </li>
</ol>​