CSS:限制嵌套 上的缩进

Question

我有一个嵌套的 <ul>像这样呈现的列表:

- 1
  - 1.1
    - 1.1.1
      - 1.1.1.1
        - 1.1.1.1.1
        - 1.1.1.1.2
      - 1.1.1.2
      - 1.1.1.3
    - 1.1.2
  - 1.2

我想用 CSS 限制列表呈现方式的最大深度(不是列表嵌套的最大级别。html 应该保持完全相同)，比如说，3 个级别，所以列表呈现为这个:

- 1
  - 1.1
    - 1.1.1
    - 1.1.1.1
    - 1.1.1.1.1
    - 1.1.1.1.2
    - 1.1.1.2
    - 1.1.1.3
    - 1.1.2
  - 1.2

可以只用 CSS 来完成吗？

Answer 1

您可以从特定深度开始定位嵌套列表:

ul > li > ul > li ul {
  margin: 0;
  padding: 0;
}

<ul>
  <li>aaaa</li>
  <li>aaaa</li>
  <li>
    <ul>
      <li>aaaa</li>
      <li>aaaa</li>
      <li>aaaa</li>
      <li>
        <ul>
          <li>aaaa</li>
          <li>
            <ul>
              <li>aaaa</li>
              <li>aaaa</li>
            </ul>
          </li>
          <li>aaaa</li>
          <li>
            <ul>
              <li>aaaa</li>
              <li>
                <ul>
                  <li>aaaa</li>
                  <li>aaaa</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>aaaa</li>
</ul>

或者像这样:

ul > li > ul > li > ul > li ul {
  margin: 0;
  padding: 0;
}

<ul>
  <li>aaaa</li>
  <li>aaaa</li>
  <li>
    <ul>
      <li>aaaa</li>
      <li>aaaa</li>
      <li>aaaa</li>
      <li>
        <ul>
          <li>aaaa</li>
          <li>
            <ul>
              <li>aaaa</li>
              <li>aaaa</li>
            </ul>
          </li>
          <li>aaaa</li>
          <li>
            <ul>
              <li>aaaa</li>
              <li>
                <ul>
                  <li>aaaa</li>
                  <li>aaaa</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>aaaa</li>
</ul>