89

我想要的只是能够将列表中项目符号的颜色更改为浅灰色。它默认为黑色，我不知道如何更改它。

我知道我可以只使用图像；如果我能帮上忙，我宁愿不这样做。

4

16 回答 16

161

项目符号从文本中获取颜色。因此，如果您想在列表中使用与文本不同的颜色项目符号，则必须添加一些标记。

将列表文本包装在一个跨度中：

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

然后稍微修改你的样式规则：

li {
  color: red; /* bullet color */
}
li span {
  color: black; /* text color */
}
于 2008-09-16T20:28:38.367 回答
45

我在没有添加标记的情况下进行了管理，而是使用了 li:before。这显然具有:before（不支持旧的 IE 支持）的所有限制，但经过一些非常有限的测试后，它似乎可以与 IE8、Firefox 和 Chrome 一起使用。它在我们的控制器环境中工作，想知道是否有人可以检查一下。项目符号样式也受到 unicode 的限制。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    li {
      list-style: none;
    }

    li:before {
      /* For a round bullet */
      content:'\2022';
      /* For a square bullet */
      /*content:'\25A0';*/
      display: block;
      position: relative;
      max-width: 0px;
      max-height: 0px;
      left: -10px;
      top: -0px;
      color: green;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>
</html>
于 2010-11-26T21:14:16.433 回答
17

这在 2008 年是不可能的，但很快就会（希望如此）成为可能！

根据W3C CSS3 规范，您可以完全控制在带有::marker伪元素的列表项之前生成的任何数字、字形或其他符号。将此应用于投票最多的答案的解决方案：

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

li::marker {
  color: red; /* bullet color */
}
li {
  color: black /* text color */
}

JSFiddle 示例

但请注意，截至 2016 年 7 月，此解决方案只是 W3C 工作草案的一部分，尚不适用于任何主流浏览器。

如果您想要此功能，请执行以下操作：

于 2013-04-16T15:10:03.817 回答
6 
<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

这种方法的最大问题是额外的标记。（跨度标签）

于 2008-09-16T20:27:05.593 回答
3

您好，也许这个答案已经晚了，但它是实现这一目标的正确答案。

好的，事实是您必须指定一个内部标记以使 LIst 文本显示为通常的黑色（或者您想要的任何内容）。但是，您也可以使用 CSS 重新定义任何标签和内部标签。因此，最好的方法是使用 SHORTER 标签进行重新定义

使用这个 CSS 定义：

li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }

这个html代码：

<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>

你得到所需的结果。您还可以使每个光盘的颜色不同：

<ul>
    <li class="c1"><b>Text 1</b></li>
    <li class="c2"><b>Text 2</b></li>
    <li class="c3"><b>Text 3</b></li>
 </ul>
于 2009-07-05T06:21:40.590 回答
2

只需在图形程序中做一个项目符号并使用list-style-image：

ul {
  list-style-image:url('gray-bullet.gif');
}
于 2012-04-19T22:11:00.583 回答
0

使用 span（或其他元素）将列表项中的文本包裹起来，并将项目符号颜色应用于列表项，并将文本颜色应用于 span。

于 2008-09-16T20:27:43.563 回答
0

根据W3C 规范，

列表属性...不允许作者为列表标记指定不同的样式（颜色、字体、对齐方式等）...

但是上面列表中带有跨度的想法应该可以正常工作！

于 2008-09-16T20:29:26.150 回答
0 
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
于 2008-09-16T20:34:09.603 回答
0

如果您有很多页面并且不需要自己编辑标记，则可以使用 Jquery。

这是一个简单的例子：

$("li").each(function(){
var content = $(this).html();
var myDiv = $("<div />")
myDiv.css("color", "red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color", "yellow"); //color of bullet
});
于 2013-01-05T20:34:05.377 回答
0

对于 2008 年的问题，我想我可能会添加一个更新和最新的答案，说明如何更改列表中项目符号的颜色。

如果您愿意使用外部库，Font Awesome 为您提供了可缩放的矢量图标，并且当与Bootstrap 的帮助类（例如text-success）结合使用时，您可以制作一些非常酷且可自定义的列表。

我已经扩展了下面的 Font Awesome 列表示例页面的摘录：

使用fa-ul和fa-li轻松替换无序列表中的默认项目符号。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<ul class="fa-ul">
  <li><i class="fa-li fa fa-circle"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square text-success"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin text-primary"></i>as bullets</li>
  <li><i class="fa-li fa fa-square text-danger"></i>in lists</li>
</ul>

Font Awesome （大部分）支持 IE8 ，如果您使用旧版本 3.2.1，则仅支持 IE7 。

于 2015-11-25T03:47:45.393 回答
0

如果我们为每个元素设置颜色，它也会起作用，例如：我现在向左添加了一些边距。

<article class="event-item">
    <p>Black text here</p>
</article>

.event-item{
    list-style-type: disc;
    display: list-item;
    color: #ff6f9a;
     margin-left: 25px;
}
.event-item p {
    margin: 0;
    color: initial;
}
于 2017-06-15T12:57:35.980 回答
-1 
<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
  • 一
  • 二
  • 三
    • 于 2008-09-16T20:29:27.163 回答
    -1

    您可以使用 CSS 来实现这一点。通过以您选择的颜色和样式指定列表，您还可以将文本指定为不同的颜色。

    按照http://www.echocho.com/csslists.htm上的示例进行操作。

    于 2008-09-16T20:53:30.007 回答
    -2

    只需使用 CSS：

    <li style='color:#e0e0e0'>something</li>
    于 2008-09-16T20:28:17.307 回答
    -5

    你会想通过 CSS 设置一个“列表样式”，并给它一个颜色：值。例子：

    ul.colored {list-style: color: green;}
    于 2008-09-16T20:28:01.490 回答