Question

我有一个包含多个嵌套的列表。如何编写我的css，以便第1级获得列表样式为光盘，第2级为圆圈，第3级为正方形，依此类推......？

我的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

将style="list-style:____;"添加到＆lt; ul＆gt;所以它将是<ul style="list-style:____;">手动或创建一个带有循环的jQuery文档，该循环遍历每个＆lt; ul＆gt;并更改其.css("list-style:____;")有两种方法。

Answer 2

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

Answer 3

在建立ul li组合时，您只需按顺序进行操作。

<强> HTML

<div class="first">
  <ul>first
     <li>Alpha</li>
     <li>Beta
        <ul>
           <li>Omega</li>
        </ul>
     </li>    
  </ul>
</div>

<强> CSS

.first ul{
  color:red;
}
.first ul li{
  color:green;
}
.first ul li li{
  color:blue;
}

示例链接：jsfiddle

Answer 4

我不认为你可以真正自动使它通过n元素因子重复不同的样式。您可以做的是将其设置为合理的深度，然后为其余部分创建默认样式，如下所示。

ul { list-style-type: disc; }
li ul { list-style-type: circle; }
li li ul { list-style-type: square; }

另一个解决方案是为每个样式创建一个类，并假设这是自动生成的，使用计数器并设置样式。

.style1 { list-style-type: disc; }
.style2 { list-style-type: circle; }
.style3 { list-style-type: square; }

然后在你的循环中启动深度计数器并用它来设置你的类：

<ul class="style<?php echo $depth % 3; ?>">

这将根据深度自动应用样式，因此第4个ul将具有style1，5th style2,6th style3，依此类推。

希望这有帮助。

如何编写我的css for list-style嵌套到n度？

4 个答案: