如何仅对无序列表中的项目符号着色[重复]答案

【问题标题】：How to color only the bullet in a unordered list [duplicate]如何仅对无序列表中的项目符号着色[重复]
【发布时间】：2015-01-01 20:05:23
【问题描述】：

我有以下几点：

<ul>
    <li>Test #1</li>
    <li>Test #2</li>
    <li>Test #3</li>
</ul>

CSS：

ul
{
    list-style-type: square;
    text-align: left;
    padding-left: 10%;
}
ul li
{
    padding: 5px;
    color: #00539B
}

JSFiddle：http://jsfiddle.net/andsf1x2/

如何只将项目符号设为蓝色和文本默认颜色

【问题讨论】：

在内部添加一个跨度并为其着色。项目符号的颜色与文本相同。也许:before 可以模仿子弹并不同地着色。
jsfiddle.net/leaverou/ytH5P

标签： html css

【解决方案1】：

您可以使用 Span，它可以让您更好地控制 css 以及文本 HTML

<ul>
        <li><span>Test #1</span></li>
        <li><span>Test #2</span></li>
        <li><span>Test #3</span></li>
</ul>

CSS

ul
{
    list-style-type: square;
    text-align: left;
    padding-left: 10%;
}
/*below are the bullets' colors*/
ul li
{
    padding: 5px;
    color: #00539B
}
/*below are the text's colors*/
ul span{
    padding: 5px;
    color: #000000
}

【讨论】：

【解决方案2】：

您可以使用 before 来模仿子弹：

ul li {
    padding: 5px;
    color: #00539B;
    list-style: none;
}
ul li:before{
    content: "-";
    color: red;
}

【讨论】：

【解决方案3】：

试试

li {
  color:#00c189 !important;
}

【讨论】：

没用，但谢谢。
- 测试#1
- 测试#2
- 测试#3
#uls li {color:#00c189 !important} 再试一次