html - 如何编写嵌套到第 n 级的列表样式的 css？

Question

我有一个包含多个嵌套的列表。我如何编写我的CSS，以便第一个级别获得列表样式为圆盘，第二个级别为圆形，第三个级别为方形等等......？

我的html如下

<ul>
  <li>Alpha</li>
  <li>Beta
    <ul>
      <li>Apple</li>
      <li>Mango
       <ul>
        <li> Item 1<li>
        <li> Item 2</li>
          .
          .
            .
            .
                nesting up to the nth degree
         </ul>
      </li>
   </ul>
 </li>

</ul>

Answer 1

/* level 1 (top) */
ul > li { list-style-type: disc; }

/* level 2 */
ul > li > ul > li { list-style-type: circle; }

/* level 3 */
ul > li > ul > li > ul > li { list-style-type: square; }

/* etc... */

您还可以将它们更通用地写为

/* level 1 */
ul li { list-style-type: disc; }

/* level 2 */
ul li li { list-style-type: circle; }