嵌套数字和符号列表

Question

在我的CSS中有以下代码来实现嵌套列表的堆叠编号(即1、1.1、1.2等)

ol { counter-reset: item }
ol li { display: block }
ol li:before { content: counters(item, ".") ". "; counter-increment: item }

但是，当我在编号列表中嵌入一个项目列表时，我发现这会干扰列表类型。

  <ol class="numberList">
    <li>
      List 9 – Multi-level mixed bullets &amp; numbers (Custom)
      <ul class="bulletList">
        <li>
          SHOULD BE A BULLET List 9 – Multi-level mixed bullets &amp; numbers (Custom)
          <ol class="numberList">
            <li>
              List 9 -- Multi-level mixed bullets &amp; numbers (Custom)
            </li>
            <li>
              List 9 -- Multi-level mixed bullets &amp; numbers (Custom)
            </li>
          </ol>
        </li>
      </ul>
    </li>
  </ol>

我应该在第一个嵌套列表中得到一个子弹，但是，我得到的是一个数字"2“。

如何通过嵌套列表的编号来获得符号列表？谢谢!

Answer 1

选择器ol li是指任何li元素，它是ol的后人。因此，如果您有<ol><li><ul><li>，那么后一个li也将被匹配。

要改变这种情况，您可以使用子组合器，它只与下面的层匹配：

ol > li { ... }
ol > li:before { ... }