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 { ... }，则后者{{1}}也会匹配。

要更改它，您可以使用descendant，它只会匹配下面的图层：

{{1}}

嵌套号码和项目符号列表

1 个答案: