使用 CSS UL/OL 的法律文件格式

Question

在 HTML/CSS 中是否有任何方法可以格式化需要与原始文档格式保持一致的法律文档。换句话说。

1. 主标题

   1.1 副标题

   1.2 副标题

   1.3 副标题

   1.3.1 Sub Sub Heading
   
   1.3.2 Sub Sub Heading
   

   1.4 副标题

2. 主标题

   2.1 副标题

等等……等等……

我知道你可以使用嵌套的 OL，但这并不能像上面那样呈现我需要的东西

编辑

在 IE 出现丑陋的脑袋之前，这当然很棒！ （我不得不怀疑微软的开发人员必须如何看待数百万关于他们产品的投诉。）我找到了这个解决方案http://www.sitepoint.com/techy-treasures-5-fudging-css-counters-in-internet-explorer/ 并尝试实施它。

它部分工作，但我不知道如何正确使用这个表达式：

  #css-counters-test li  
  {  
     zoom: expression(  
      (typeof step == "undefined" ? step = 1 : step++),  
      this.innerHTML = (typeof this.processed == "undefined"  
            ? ("<span class=before>" + step + ": </span>")  
            : "")  
        + this.innerHTML,  
      this.processed = true,  
      this.runtimeStyle.zoom = "1"  
      );  
  }

Answer 1

对于这种类型的功能，您可以使用counter-increment 属性检查：

HTML

<ol>
  <li>item 1
    <ol>
      <li>sub item 1
        <ol>
          <li>sub-sub item 1</li>
          <li>sub-sub item 2</li>
          <li>sub-sub item 3</li>
        </ol>
      </li>
      <li>Sub item 2</li>
   </ol>
  </li>
  <li>item 2</li>
</ol>

CSS

ol {
  counter-reset: section;
  list-style-type: none;
}
ol ol ol{background:#c0c0c0; padding-left:10px;}       
ol li { counter-increment: section; }

ol li:before  { content: counters(section, ".") ". "; }

可以在here找到使用此属性的实时示例

相关阅读来自Opera dev site

Answer 2

你有正确的想法，只需要使用{content:;}和{counter:;}

Live example can be found here