html - 有序列表未将嵌套数字正确应用于第二项

Question

您好，我正在尝试整理条款和条件页面的有序列表，不幸的是，当我使用下面的代码时，它会将列表嵌套为

1.item
     1.item
        a.item
        b.item 
        c.item
          i. item

这不是我想要的，我希望它读作

1.item
     1.1 item
        a.item
        b.item 
        c.item
          i. item

标记是

<ol id="mainOL">
    <li>item
        <ol>
            <li>item
                <ol type="a">
                    <li>item</li>
                    <li>item</li>
                    <li>item
                        <ol type="i">
                            <li>item</li>
                            <li>item</li>
                            <li>item/li>
                                </ol>
                            </li>
                    </li>
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

ol#mainOL {
    counter-reset: mainOL;
    margin-left: 0px;
}
ol#mainOL > li:before{
    counter-increment: mainOL;
   /* content: counters(mainOL,".")" ";*/
}

Answer 1

基本上，您想要更改列表的第一级和第二级。

有了计数器就可以了。 (就像 Nico O 也指出的那样)

#mainOL,
#mainOL>li>ol {
  list-style: none;
}
/* first level*/

#mainOL {
  counter-reset: outer;
}
#mainOL>li:before {
  counter-increment: outer;
  content: counter(outer, decimal)'.';
}
/* second level*/

#mainOL>li>ol {
  counter-reset: inner;
}
#mainOL>li>ol>li:before {
  counter-increment: inner;
  content: counter(outer, decimal)"."counters(inner, '.');
}

<ol id="mainOL">
  <li>item
    <ol>
      <li>item
        <ol type="a">
          <li>item</li>
          <li>item</li>
          <li>item
            <ol type="i">
              <li>item</li>
              <li>item</li>
              <li>item</li>
            </ol>
          </li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>