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

Posted 2023-02-23

【中文标题】更改列表的项目符号颜色[重复]

【英文标题】：Change the bullet color of list [duplicate]

【发布时间】：2014-11-01 06:20:42

【问题描述】：

我有一个清单，

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

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

    .listStyle
        list-style-type: square;
    

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

请帮忙， 谢谢

【问题讨论】：

How to set the Color of Bullets in UL/LI Lists via CSS, WITHOUT using images or span tags?

在strong之前添加span标签并为span分配颜色。

jsbin.com/juxasa/1/edit

您可以使用伪元素 ::before 然后应用内容：“•”；并隐藏列表样式。

【参考方案1】：

你必须使用图像

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

【讨论】：

圆形不要用图片，用css很容易生成。没有请求和缩放支持。

【参考方案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>

【讨论】：

@C-linkNepal 你是对的，当我更新我的答案时你正在写这个:)

红色正在工作。 “.listStyle p”不起作用。由于内容不在 p 标签内

我不同意，添加了一个 JS Fiddle 来证明这一点。

:-) 在我的问题中，li 内没有 p 标签。可能我可以添加一个跨度标签或其他东西来使它工作。由于添加 p 标签会为 li

添加大量样式

我知道你没有p 标签。是的，您可以使用任何其他标签 :)

【参考方案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 */

【讨论】：

伪元素对于详细的项目符号来说是一个糟糕的选择。文本将在项目符号下换行，而不是使用真正的项目符号与上面的文本行对齐

伪元素不是一个糟糕的选择：jsfiddle.net/leaverou/ytH5P