嵌套列表中的计数器重置问题答案

【问题标题】：Counter-reset issues within nested lists嵌套列表中的计数器重置问题
【发布时间】：2019-01-02 17:57:33
【问题描述】：

我正在使用一种精心设计的编号列表样式，其中包含计数器和有序列表。我最初在互联网上找到了这段代码，所以我不是它的主人。但我的问题是，当我必须以特定数字开始列表时（我确实想出了如何去做），当我有一个嵌套在我精心编号的列表中的无序列表时，项目符号列表在计数器中显示为数字而不是子弹。谢谢！

这是我所说的简化版本：

ol.simple-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/
    margin-top: 0;
    margin-right: 0;
    margin-left: 3.8em;
    padding: 0;
    counter-reset: li-counter;
}

ol.simple-list > li {
    position: relative;
    margin-bottom: 20px;
    padding-left: -.3em;
    min-height: 3em;
    border-left: 0px solid #CCCCCC;
    margin-left: -5.4%;
}

#start_at_13 ol {
    counter-reset: start 12
}

#start_at_13 li {
    display: block 
}

#start_at_13 li:before {
    content: counter(start) " "; 
    counter-increment: start
}


<section id="start_at_13">
    <ol class="simple-list">
        <li>numbers.
        </li>
        <li>numbers
        </li>
        <li>numbers
        </li>
        <li>numbers
            <ul>
                <li>Should be bullets </li>
                <li>Should be bullets</li>
                <li>Should be bullets</li>
            </ul>
        </li>
        <li>numbers
        </li>
    </ol>
</section>

【问题讨论】：

标签： html css nested counter

【解决方案1】：

将以下规则更改为仅适用于作为ol 的直接子代的lis：

/** I'm not sure why you need this rule at all **/
#start_at_13 ol > li {
  display: block
}

#start_at_13 ol > li:before {
  content: counter(start) " ";
  counter-increment: start
}

示例：

ol.simple-list {
  list-style-type: none;
  list-style-type: decimal !ie;
  /*IE 7- hack*/
  margin-top: 0;
  margin-right: 0;
  margin-left: 3.8em;
  padding: 0;
  counter-reset: li-counter;
}

ol.simple-list>li {
  position: relative;
  /** margin-bottom: 20px; removed for demo purposes **/
  padding-left: -.3em;
  /** min-height: 3em; removed for demo purposes **/
  border-left: 0px solid #CCCCCC;
  margin-left: -5.4%;
}

#start_at_13 ol {
  counter-reset: start 12
}

#start_at_13 ol > li {
  display: block
}

#start_at_13 ol > li:before {
  content: counter(start) " ";
  counter-increment: start
}

<section id="start_at_13">
  <ol class="simple-list">
    <li>numbers.
    </li>
    <li>numbers
    </li>
    <li>numbers
    </li>
    <li>numbers
      <ul>
        <li>Should be bullets </li>
        <li>Should be bullets</li>
        <li>Should be bullets</li>
      </ul>
    </li>
    <li>numbers
    </li>
  </ol>
</section>

【讨论】：