如何在使用计数器后重置嵌套的有序列表

时间:2017-05-16 23:51:59

标签: css frontend

我正在为网站添加隐私权政策,并且我已使用大量嵌套列表标记了内容......

这是我想要的输出:

1  
   1.1  
   1.2
      a
      b
         i
         ii
         ii
      c
   1.3  
   1.4   
2
   2.1
   2.2
   2.3
3

这个CSS正在获得第一和第二级的编号,我只是不确定如何将第3级重置为lower-alpha,将第4级重置为lower-roman

ol {
  counter-reset: item;
  li{
    display: block;
    line-height: 26px;
  }
  li:before {
    content: counters(item, ".") ") ";
    counter-increment: item
  }
  ol {
    /* Second level that is coming out as 1.2 correctly */
    ol {
      /* Third level - how do I reset this to just be lower-alpha??? */
      li {

      }
      li:before {

      }
      ol {
        li {

        }
        li:before {

        }
      }
    }
  }
}

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:2)

你可以使用类似的东西:



ol {
    counter-reset: item;
    list-style-type: none;
}
li{
    line-height: 26px;
}
li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}
ol  ol {
    /* Second level that is coming out as 1.2 correctly */
}
ol ol ol {
    /* Third level - how do I reset this to just be lower-alpha??? */
    list-style-type: lower-latin
}
ol ol ol li:before {
    content: '';
    counter-increment: none;
}
ol ol ol ol {
    list-style-type: lower-roman;
}

<ol>
  <li>aaa</li>
  <li>bbb</li>
  <li>
      <ol>
          <li>aaa</li>
          <li>bbb</li>
          <li>
              <ol>
                  <li>aaa</li>
                  <li>bbb</li>
                  <li>
                      <ol>
                          <li>aaa</li>
                          <li>bbb</li>
                      </ol>
                  </li>
              </ol>
          </li>
      </ol>
  </li>
</ol>
&#13;
&#13;
&#13;