如何更改无序列表中点的颜色？

Question

我想更改无序列表中点的颜色：

 <ul>
<li></li>
</ul>

有没有办法可以用 CSS 做到这一点？我看不到属性？

原文由 Marie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最简单（但相当不语义）的方法是将内容包装在 span 标签中，然后将项目符号颜色应用于 li 并将文本颜色应用于 span

在代码中：

 <ul>
    <li><span>text</span></li>
    <li><span>text</span></li>
    <li><span>text</span></li>
</ul>

 ul li {
    /* Bullet color */
    color: red;
    list-style-type: disc;
}

ul li span {
    /* Text color */
    color: black;
}

jsFiddle 预览

如果您不能修改您的 HTML，您可以使用 list-style-image 和自定义颜色的点，或者使用生成的内容（即 li:before ）并相应地为其着色（但要注意列出项目符号位置问题）。

这是 li:before 的示例：

 ul li {
    /* Text color */
    color: black;
    list-style-type: none;
}

ul li:before {
    /* Unicode bullet symbol */
    content: '\2022 ';
    /* Bullet color */
    color: red;
    padding-right: 0.5em;
}

原文由 BoltClock 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

进一步发展@BoltClock 给出的答案：

 ul li {
    color: black;
    list-style-type: none;
}

ul li:before {
    color: red;
    float: left;
    margin: 0 0 0 -1em;
    width: 1em;
    content: '\2022';
}

通过这种方式，多行项目符号的所有行都可以正确缩进。当心：我还没有机会在 IE 上测试它！

原文由 ranbureand 发布，翻译遵循 CC BY-SA 3.0 许可协议