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

Question

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

关键是我需要在语义上做这件事；从而避免用户在保持文本颜色为黑色的同时必须添加一个类或一段HTML。

一个例子：

• 用红色项目符号列出项目
• 用蓝色项目符号列出项目
• 用绿色项目符号列出项目
• 等等

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

Answer 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;
}

Answer 2

@sapan的上述解决方案涵盖了保持文本颜色不变。要自动更改项目符号颜色，您需要第n个子项：

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可能是你最好的选择。

Answer 3

Whereshys解决方案（如下）对我来说是最好的，我刚刚用它为wordpress/joomla创建了一个菜单，当添加新的li时，css可以自动更改颜色。我会投赞成票，但还没有获得声誉分数。

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子对象相同的方式引用该对象。这意味着，如果你想在元素悬停时将其应用于元素，你的代码将看起来像ul-li:hover:nth child（奇数/偶数或数字或等式）。我发现这个教程非常有用，因为它在底部有一个演示链接。需要注意的一点是，这与IE 8及以下版本不兼容。

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

Answer 4

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

Answer 5

使用:before伪类，您可以很容易地自定义您的列表：

li:before {
    content: "0BB 020";
    color: Red;
}

演示

这篇来自A-List-Apart的文章很好地涵盖了这个主题​

Answer 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%;}

Answer 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>