格式化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>​