更改列表的项目符号颜色[重复]

Question

我有一个清单，

    <ul class="listStyle">
        <li>
            <strong>View :</strong> blah blah.
        </li>
        <li>
            <strong>Edit :</strong> blah blah blah.
        </li>
    </ul>

我在列表中使用方形项目符号。

    .listStyle{
        list-style-type: square;
    }

项目符号显示为黑色。可以改变子弹的颜色吗？如果是，我该如何更改？

请帮忙， 谢谢

Answer 1

你必须使用图像

.listStyle {
    list-style: none;
    background: url(bullet.jpg) no-repeat left center;
    padding-left: 40px;
}

Answer 2

Example JS Fiddle

项目符号采用列表的color 属性：

.listStyle {
    color: red;
}

请注意，如果您希望列表文本采用不同的颜色，则必须将其换成p，例如：

.listStyle p {
    color: black;
}

Example HTML:

<ul class="listStyle">
    <li>
        <p><strong>View :</strong> blah blah.</p>
    </li>
    <li>
        <p><strong>View :</strong> blah blah.</p>
    </li>
</ul>

Answer 3

我建议你使用背景图片而不是默认列表。

.listStyle {
    list-style: none;
    background: url(image_path.jpg) no-repeat left center;
    padding-left: 30px;
    width: 20px;
    height: 20px;
}

或者，如果您不想将背景图像用作项目符号，则可以选择使用伪元素：

.liststyle{
    list-style: none;
    margin: 0;
    padding: 0;
}
.liststyle:before {
    content: "• ";
    color: red; /* or whatever color you prefer */
    font-size: 20px;/* or whatever the bullet size you prefer */
}