如何仅在无序列表中为子弹着色

Question

我有以下内容：

<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/

如何才能使子弹蓝色和文本默认颜色

Answer 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
}

Answer 2

您可以使用之前模仿子弹：

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

Answer 3

尝试

li {
  color:#00c189 !important;
}