格式化有序列表<ol> CSS

Question

我正在尝试列出类似这样的列表：

 1. Parent List.
   1.1 List item.
      a. List item's sub item.

这是我在SO中找到的CSS。

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

但是它呈现如下：

 1. Parent List.
   1.1 List item.
      1.1.1 List item's sub item.

Answer 1

您可以仅重置第三级li的列表样式类型和内容：

ol {
  counter-reset: item
}

li {
  display: block
}

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

/* change back to list item and use lower alpha */
li li li {
  display:list-item;
  list-style-type: lower-alpha;
}

/* remove content */
li li li:before {
  content:'';
}

<ol>
  <li> parent
    <ol>
      <li> child
        <ol>
          <li> grand-child</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>