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

Question

我正在向一个网站添加隐私政策，并且我用很多嵌套列表标记了内容…

这是我想要的输出：

这个 CSS 正在为第 1 级和第 2 级获取正确的编号我只是不确定如何将第 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 {

        }
      }
    }
  }
}

如有任何帮助，我们将不胜感激。

Answer 1

你可以使用类似的东西：

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>

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

How to reset nested Ordered Lists after using a counter

css

frontend