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

【问题标题】：Use CSS to alternate ul bullet point styles使用 CSS 替换 ul 项目符号样式
【发布时间】：2011-03-28 03:34:36
【问题描述】：

我想为 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 实现这一点？

【问题讨论】：

嵌套层数是否固定？因为如果不是这样，仅使用 CSS 就很难做到这一点。
不，我正在尝试为尽可能长的列表重复 list-style-type，但如果需要，我可以手动编码缩进级别，如果有其他解决方案.如果 JavaScript 解决方案有效，那也是可以接受的。

标签： css html-lists

【解决方案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

【讨论】：

那不行；使用我的示例代码，在第一个 li 之后你会得到两个项目符号。此外，您的项目符号样式不会继续重复列表样式的相同模式。

【解决方案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;
}

或者您可以根据嵌套方式向uls 添加样式：

ul
{
    list-style-type:disc;
}

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

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

我想不通，所以可能会有一些小错误，但是这两个示例基本上都应该有效。

【讨论】：

【解决方案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/查看工作示例

【讨论】：

不过，我需要的是让子弹在嵌入到其他 li 元素中时进行切换。
你不能那样做。您需要使用类名引用ul 或li 的每个级别。否则，您将获得双倍或三倍子弹，具体取决于您的树有多深。
支持CSS3选择器的浏览器是否可以使用，不支持的浏览器是否可以使用ids？
那是多余的，如果你使用 id 就没有理由使用 css3。
是否可以使用 PHP 或 JavaScript 自动生成具有正确 ID 的列表？

【解决方案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>

使用固定代码，上述解决方案有效。

【讨论】：

【解决方案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;
}

【讨论】：