如何更改 <li> 项目的每个项目符号点的颜色？答案

【问题标题】：How can I change the colour of each bullet point of a <li> item?如何更改 <li> 项目的每个项目符号点的颜色？
【发布时间】：2012-02-17 12:31:41
【问题描述】：

举例来说，我想要一个项目列表，每个项目都有不同颜色的项目符号点。

关键是我需要相对语义和自动地执行此操作，避免用户在保持文本颜色为黑色的同时添加一个类或一段 HTML。

一个例子：

带有红色项目符号的列表项
带有蓝色项目符号的列表项
带有绿色项目符号的列表项
等

它提出了一个有趣的问题——如何做到这一点，以便用户可以简单地添加项目列表，我的代码会相应地更新它们。

【问题讨论】：

好问题。到目前为止，您尝试过什么？
很确定您不能单独设置项目符号点的颜色。您必须为此使用图像。
我已经尝试并测试了具有不同类的
，但我想要更自动化的东西。

【解决方案1】：

删除默认项目符号，并添加项目符号字符（U+2022 BULLET 或其他）作为生成的内容。您可以单独设置生成的内容的样式。这是灵活的，不需要额外的标记（显然，除了一些区分不同项目的标记之外），但缺点是在旧版本的 IE 上失败（不支持生成的内容）。

假设标记

<ul class="mixed">
  <li class="red">One.</li>
  <li class="green">Two.</li>
</ul>

样式表可以是

ul.mixed {
  list-style-type: none;
}
ul.mixed li:before {
 content: "\2022";
 padding-right: 0.5em;
}
li.red:before {
  color: red;
}
li.green:before {
  color: green;
}

【讨论】：

我不明白 li.green:before { } 的逻辑 - Stlying .green 'before' 的元素，我们为什么需要那个对不起？
@SMacFadyen - 所以子弹本身是有颜色的。
任何让它动态的方法（尤其是通过 jQuery），例如，将颜色 red 或任意颜色从属性 data-bullet-color 复制到颜色属性？

【解决方案2】：

@sapan 的上述解决方案包括将文本保持为固定颜色。要自动更改项目符号颜色，您需要 nth-child：

ul li:nth-child(3n) { color:green; }
ul li:nth-child(3n+1) { color:red; }
ul li:nth-child(3n+2) { color:blue; }

ie9 和所有优秀的浏览器都支持它，但对于早期版本的 ie，您需要在 html/accept it's not going to happen 中使用 javascript 后备/手动添加类。此外，以上假设您想要以固定顺序循环使用的颜色数量有限。如果您想要更灵活的东西，那么总体而言，javascript 可能是您最好的选择。

【讨论】：

我最喜欢这个，并且可能会实现它。但是，我可能需要 IE7/IE8 支持 - 我想知道是否有什么可以做的。

【解决方案3】：

Wheresrhys 解决方案（如下）对我来说是最好的，我一直在使用它为 wordpress/joomla 创建一个菜单，其中 css 可以在添加新的 li 时自动更改颜色。我会投票，但还没有声望点。

ul li:nth-child(3n) { color:green; }
ul li:nth-child(3n+1) { color:red; }
ul li:nth-child(3n+2) { color:blue; }

ie9 和所有优秀的浏览器都支持它，但对于早期版本的 ie，您需要在 html/accept 中使用 javascript 后备/手动添加类，但不会发生这种情况。此外，以上假设您有有限数量的颜色要以固定顺序循环。如果您想要更灵活的东西，那么总体而言，javascript 可能是您最好的选择。”

对于那些没有 css 经验的人的一个见解是，这可以通过将第 n 个子元素的 css 样式作为主类的子元素来工作，就像你编写 ul li:hover 时一样。因此，您的代码必须以与 ul li:nth-child 相同的方式引用该对象。这意味着如果您想在元素悬停时将其应用于元素，您的代码将如下所示 ul li:hover:nth-child （奇数/偶数或数字或等式）。底部的演示链接。需要注意的一点是，这与 IE 8 及更低版本不兼容。

http://css-tricks.com/how-nth-child-works/

【讨论】：

【解决方案4】：

这里最大的问题是跨浏览器的兼容性。奇怪的是，我认为你最好的选择是使用 css sprites 作为 LI 的背景图像。

【讨论】：

【解决方案5】：

使用:before 伪类，您可以非常轻松地自定义列表：

li:before {
    content: "\00BB \0020";
    color: Red;
}

DEMO

article from A-List-Apart 很好地涵盖了这个主题

【讨论】：

【解决方案6】：

为每个效果使用单独的类并将它们应用到 li 的

li{padding-left:10px;}
li.red{background-image: url(images/red.gif) no-repeat left 50%;}
li.blue{background-image: url(images/blue.gif) no-repeat left 50%;}
li.green{background-image: url(images/green.gif) no-repeat left 50%;}

【讨论】：

【解决方案7】：

您可以使用<span> 或<p> 将li 中的文本换行，然后使用以下css：

ul li.green { color:green; }
ul li.red { color:red; }
ul li span { color:navy; }

示例 html：

<ul>
    <li class="red"><span>One.</span></li>
    <li class="green"><span>Two.</span></li>
</ul>

【讨论】：