如何让ul嵌套的ol列表从1开始计数？CSS列表样式问题

我正在尝试使用CSS设置嵌套列表的样式，但遇到了一个问题：当无序列表（ul）中嵌套有序列表（ol）时，该ol的序号会从类似6.1的形式开始，而非从1开始。我不清楚这种情况下CSS计数器的工作机制，希望找到简单的解决方法。

原始HTML代码 #

<ol>
      <li>Lorem ipsum dolor sit amet,</li>
      <li>Lorem ipsum dolor sit amet,</li>
      <li>Lorem ipsum dolor sit amet,
        <ol>
          <li>Lorem ipsum dolor sit amet,</li>
          <li>Lorem ipsum dolor sit amet,</li>
          <li>Lorem ipsum dolor sit amet,</li>
          <li>Lorem ipsum dolor sit amet,</li>
        </ol>
      </li>
      <li>Lorem ipsum dolor sit amet,</li>
      <li>Lorem ipsum dolor sit amet,
        <ul>
          <li>Lorem ipsum dolor sit amet,</li>
          <li>Lorem ipsum dolor sit amet,</li>
          <li>Lorem ipsum dolor sit amet,</li>
          <li>Lorem ipsum dolor sit amet,</li>
        </ul>
      </li>
      <li>Lorem ipsum dolor sit amet,</li>
    </ol>
    <ul>
      <li>Lorem ipsum dolor sit amet,</li>
      <li>Lorem ipsum dolor sit amet,
        <ol>
          <li>Lorem ipsum dolor sit amet,</li>
          <li>Lorem ipsum dolor sit amet,</li>
          <li>Lorem ipsum dolor sit amet,</li>
          <li>Lorem ipsum dolor sit amet,</li>
        </ol>
      </li>
      <li>Lorem ipsum dolor sit amet,</li>
      <li>Lorem ipsum dolor sit amet,
        <ol>
          <li>Lorem ipsum dolor sit amet,</li>
          <li>Lorem ipsum dolor sit amet,</li>
          <li>Lorem ipsum dolor sit amet,</li>
          <li>Lorem ipsum dolor sit amet,</li>
        </ol>
      </li>
      <li>Lorem ipsum dolor sit amet,</li>
      <li>Lorem ipsum dolor sit amet,</li>
      <li>Lorem ipsum dolor sit amet,</li>
      <li>Lorem ipsum dolor sit amet,</li>
    </ul>

原始SCSS代码 #

ul {
  &>li {
    list-style-type: none;
    position: relative;
    padding-left: 4rem;
    &::before {
      content: "\2022";
      color: charte.$primaryColor;
      font-size: 4rem;
      position: absolute;
      left: 0;    
    }
  }
}

ol {
  counter-reset: item;
  &>li {
    list-style-type: none;
    position: relative;
    padding-left: 4rem;
    &::before {
      counter-increment: item;
      content: counters(item, ".") ".";
      font-weight: 700;
      position: absolute;
      left: 0;
    }
  }
}

当前异常效果 #

ul内嵌套的ol序号会继承页面中前序ol的累计计数，例如第二个ul的第二个li内的ol第一项显示为6.1，而非预期的1。

问题原因 #

CSS计数器默认是文档级作用域，counters(item, ".")会遍历所有祖先层级的同名计数器。页面第一个ol的item计数器累计到6后，后续ul内的ol虽重置了自身的item计数器，但counters()仍会将全局累计的6与当前序号串联，导致异常。

修复方案 #

给ul添加计数器重置规则，隔离全局计数器的影响，确保ul范围内的ol能从1开始独立计数：

修改后的SCSS代码 #

ul {
  counter-reset: item; // 新增：重置ul范围内的item计数器
  &>li {
    list-style-type: none;
    position: relative;
    padding-left: 4rem;
    &::before {
      content: "\2022";
      color: charte.$primaryColor;
      font-size: 4rem;
      position: absolute;
      left: 0;    
    }
  }
}

ol {
  counter-reset: item;
  &>li {
    list-style-type: none;
    position: relative;
    padding-left: 4rem;
    &::before {
      counter-increment: item;
      content: counters(item, ".") ".";
      font-weight: 700;
      position: absolute;
      left: 0;
    }
  }
}

修复后效果 #

• 嵌套在ol内的ol保持原层级序号（如3.1、3.2）
• ul内的ol从1开始独立计数，不再继承前序列表的累计值

内容的提问来源于stack exchange，提问作者Louis