有没有一种简单的方法来改变列表中子弹的颜色？

我想要的是能够将列表中的子弹颜色更改为浅灰色.它默认为黑色,我无法弄清楚如何更改它.

我知道我可以使用图像; 如果我能帮助它,我宁愿不这样做.

1> Prestaul..：

---

子弹从文本中获取颜色.因此,如果您希望使用与列表中的文本不同的颜色项目符号,则必须添加一些标记.

在一个范围中包装列表文本:

  
item #1
  
item #2
  
item #3

然后稍微修改您的样式规则:

li {
  color: red; /* bullet color */
}
li span {
  color: black; /* text color */
}

---

@KoenHoutman,在撰写本文时(2008年),它是唯一得到合理支持的技术.即使在今天这也不是一个糟糕的做法,仍然是最广泛的浏览器支持的技术,虽然我同意今天(在大多数情况下)我会选择使用`:before`,如下面Marc的答案.

2> Marc..：

---

我在没有添加标记的情况下管理了这个,而是使用li:before.这显然具有所有限制:before(没有旧的IE支持),但它似乎适用于IE8,Firefox和Chrome经过一些非常有限的测试.它在我们的控制器环境中工作,想知道是否有人可以检查这一点.子弹样式也受到unicode内容的限制.

  



  

    
foo
    
bar
  

3> Supuhstar..：

---

这在2008年是不可能的,但它很快就会成为可能(希望如此)!

根据W3C CSS3规范,您可以完全控制在具有::marker伪元素的列表项之前生成的任何数字,字形或其他符号.要将此应用于投票最多的答案解决方案:

  
item #1
  
item #2
  
item #3


li::marker {
  color: red; /* bullet color */
}
li {
  color: black /* text color */
}

JSFiddle示例

但请注意,截至2016年7月,此解决方案仅是W3C工作草案的一部分,但尚未在任何主流浏览器中使用.

如果您需要此功能,请执行以下操作:

Blink(Chrome,Opera,Vivaldi,Yandex等):明星Chromium的问题

Gecko(Firefox,Iceweasel等):点击"(投票)"这个bug

Trident(IE,Windows网页浏览量):点击"我可以","X用户可以重现此错误"
^{Trident开发已经停止}

EdgeHTML(MS Edge,Windows Web视图,Windows现代应用程序):在此prpopsal上单击"投票"

Webkit(Safari,Steam,WebOS等):给自己判断这个bug

4> Jonathan Ark..：

---

  
test

这种方法的一个大问题是额外的标记.(span标签)