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>

有序列表未正确应用嵌套数到第二项

1 个答案: