在不使用span的情况下更改HTML列表的项目符号颜色

Question

我想知道是否有办法改变列表中子弹的颜色。

我有一个这样的列表：

<ul>

   <li>House</li>

   <li>Car</li>

   <li>Garden</li>

</ul>

我不可能在li中插入任何内容，例如'span'og a'p'。那么我能以某种聪明的方式改变子弹的颜色而不是文本吗？

Answer 1

如果您可以使用图像，那么您可以这样做。如果没有图像，您将无法仅更改项目符号的颜色，也无法更改文本。使用图像li { list-style-image: url(images/yourimage.jpg); }看到列表样式图像不使用图像然后，您必须编辑HTML标记并在列表中包含一个范围，并使用不同的颜色为li和span着色。

Answer 2

我管理这个没有添加标记，而是使用li:before。这显然具有所有限制:before（没有旧的IE支持），但它似乎适用于IE8，Firefox和Chrome经过一些非常有限的测试。子弹样式也受到unicode内容的限制。li {&nbsp; list-style: none;}li:before {&nbsp; /* For a round bullet */&nbsp; content: '\2022';&nbsp; /* For a square bullet */&nbsp; /*content:'\25A0';*/&nbsp; display: block;&nbsp; position: relative;&nbsp; max-width: 0;&nbsp; max-height: 0;&nbsp; left: -10px;&nbsp; top: 0;&nbsp; color: green;&nbsp; font-size: 20px;}<ul>&nbsp; <li>foo</li>&nbsp; <li>bar</li></ul>