Question

我想替换ul列表的list-style-type属性，以便外部是一个光盘，然后一个内部ul列表是一个圆，而另一个内部是一个光盘，依此类推。

基本上，我想要的是：

<ul><!-- use disc -->
  <li>Lorem ipsum</li>
  <li>
    <ul><!-- use circle -->
      <li>Lorem ipsum</li>
      <li>
        <ul><!-- use disc -->
          <li>Lorem ipsum</li>
        </ul>
      </li>
      <li>Lorem ipsum</li>
    </ul>
  </li>
  <li>Lorem ipsum</li>
</ul>

如何使用CSS完成此操作？

Answer 1

喜欢这个......

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

等等......

第一级列表项将具有“圆圈”类型标记。第二个（嵌入式）将使用“光盘”。第三级将使用正方形。

只需使用上面的CSS并更改list-style即可满足您的需求。您可以在此处找到list-style类型列表：http://www.w3schools.com/cssref/pr_list-style-type.asp

Answer 2

您可以通过将class或id添加到ul代码来使用单独的样式：

<ul class="disk"><!-- use disk -->
  <li>Lorem ipsum</li>
  <li>
    <ul class="circle"><!-- use circle -->
      <li>Lorem ipsum</li>
      <li>
        <ul class="disk"><!-- use disk -->
          <li>Lorem ipsum</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

.disk
{
    list-style-type: disc;
}

.circle
{
    list-style-type: circle;
}

或者你可以根据它们的嵌套方式向ul添加样式：

ul
{
    list-style-type:disc;
}

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

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

离开我的头顶，所以可能会有一些小错误，但这两个例子基本上都应该有效。

Answer 3

最好给每个元素添加不同的子弹类型一个类名。

<ul>
    <li class="disk">test</li>
    <li class="circle">test</li>
    <li class="sq">test</li>
    <li class="sq">test</li>
</ul>

.disk {    
    list-style-type: disc;
}
.circle {
    list-style-type: circle;
}
.sq {
    list-style-type: square;
}

检查http://jsfiddle.net/LWQrh/

处的工作示例

Answer 4

我找到了我得到双子弹的原因。我的列表在语义上不正确，因此他们创建了多个项目符号。

这是正确的HTML：

<ul><!-- use disc -->
  <li>Lorem ipsum
    <ul><!-- use circle -->
      <li>Lorem ipsum
        <ul><!-- use disc -->
          <li>Lorem ipsum</li>
        </ul>
      </li>
      <li>Lorem ipsum</li>
    </ul>
  </li>
  <li>Lorem ipsum</li>
</ul>

使用固定代码，上述解决方案可以正常工作。

Answer 5

这个问题的简单答案是否定的，它不能通过CSS以一致的方式完成。

你可以编写一些javascript来解析整个页面并基本上维护一堆UL，但它会有点草率和hackish。它必须是这样的。

function doStyle(htmlBlock, depth)
    var returnHtml = '';

    // While the HTML block presented has UL tags within it
    while(htmlBlock.indexOf('<ul>') > 0) {

        // Take all the content up to the next/first <UL>
        returnHtml += htmlBlock.substring(0, htmlBlock.indexOf('<ul>'));

        // Add a styled <UL>, alternating on depth
        returnHtml += '<ul class="' + (depth % 2 == 0 ? 'square' : 'circle') + '">';

        // Recurse on the content inside that UL, using depth + 1
        returnHtml += doStyle(htmlBlock.substring(htmlBlock.indexOf('<ul>'), htmlBlock.indexOf('</ul>')), depth + 1);

        // Close the <UL>
        returnHtml += '</ul>';

        // Pull the whole UL block out of the remaining string
        htmlBlock = htmlBlock.substring(htmlBlock.indexOf('</ul>') + 5);
    }

    // Return the built up string, 
    // And whatever is left of the original HTML block
    return returnHtml + htmlBlock;
}

使用CSS替换ul项目符号点样式

5 个答案:

检查http://jsfiddle.net/LWQrh/