Question

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

这是我所谈论的内容的简化版本：

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>

Answer 1

更改以下规则，使其仅适用于li的直接子代ol：

/** 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>

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

1 个答案: