如何更改无序列表中点的颜色？ [英] How can I change the color of the dot in an unordered list?

问题描述

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

I want to change the color of dots in an unordered list:

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

有一种方法，我可以用CSS做到这一点？我不能看到属性？

Is there a way that I can do this with CSS? I can't see a property?

推荐答案

最简单的方法是$ c> span 标签，然后将项目符号颜色应用于 li ，并将文本颜色应用于 span 。

The easiest (but rather unsemantic) way is to wrap the content in span tags, then apply the bullet color to li and text color to 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 preview

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

If you can't modify your HTML, you can either use list-style-image with a custom-colored dot, or use generated content (i.e. li:before) and color it accordingly (but watch out for list bullet position problems).

这里是一个例子， 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;
}

这篇关于如何更改无序列表中点的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！