2

我有一个包含多个嵌套的列表。如何编写我的 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>
4

4 回答 4

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; }
于 2013-07-05T13:00:18.977 回答
1

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

于 2013-07-05T12:57:17.730 回答
0

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

于 2013-07-05T12:59:44.813 回答
0

我不认为你真的可以自动让它通过一个 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、第 5 个 style2、第 6 个 style3，依此类推。

希望这可以帮助。

于 2013-07-05T13:00:42.870 回答