有序标签的类型不起作用

Question

请考虑以下HTML和CSS代码：

HTML：

<ol>
      <li>Test</li>
      <li>
        <ol>
          <li>Sub-Chapter</li>
          <li>Sub-Chapter</li>
        </ol>
      </li>

      <li>Chapter II</li>

      <li> Checking Type A
        <ol type = "A">
          <li>New Sub-Chapter</li>
          <li>New Sub-Chapter</li>
        </ol>
        </li>  


    </ol>

    <ol>
      <li>A New List</li>

    </ol>

CSS：

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

为什么我看不到A和B打印New Sub Chapter但是4.1和4.2？

我的JSFiddle

Answer 1

您应该以下面的方式插入 HTML 和 CSS 文件。您还可以在 JSFIDDLE 中看到。

＆＃13;

＆＃13;

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

＆＃13;

<ol>
  <li class="list">Test</li>
  <li class="list">
    <ol>
      <li class="list" >Sub-Chapter</li>
      <li class="list" >Sub-Chapter</li>
    </ol>
  </li>

  <li>Chapter II</li>

  <li>Checking Type A
    <ol type="A">
      <li>New Sub-Chapter</li>
      <li>New Sub-Chapter</li>
    </ol>
  </li>


</ol>

<ol>
  <li>A New List</li>

</ol>

＆＃13;

＆＃13;

＆＃13;