Question

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

踢球者是我需要在相对语义上做到这一点＆amp;自动地，避免用户必须添加一个类或一段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上面的解决方案包括将文本保持为设定颜色。要自动更改子弹颜色，您需要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可能是你最好的选择。

Answer 3

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

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中接受javascript后备/手动添加的类/接受它不会发生。此外，上面假设您希望以固定顺序循环显示有限数量的颜色。如果你想要更灵活的东西，那么javascript可能是你最好的选择。“

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

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

Answer 4

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

Answer 5

您可以使用li或<span>将文字打包在<p>中，然后使用以下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>

Answer 6

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

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

DEMO

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

Answer 7

为每个效果使用单独的类并将它们应用于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%;}

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

7 个答案: