更改HTML列表中项目符号的颜色？

86

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

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

html css html-lists

— 戴夫·海恩斯
source

我自己会自己处理图片，避免额外的标记。这可能是更有效的解决方案

— Sam Murray-Sutton

8

谁在乎这样的“额外”标记……认真地讲，这样做不会使您失去任何利益。

159

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

将列表文本换成跨度：

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

— 前期
source

正是我需要的！我有一个链接列表，无论如何，这些链接已经具有不同的颜色样式。

— 戴夫·海恩斯

这不是最好的方法。例如，当您使用WYSIWYG编辑器时，这将不起作用。<span>元素将不会呈现。您可能想要使用：before和：after，而忽略掉霸王本身。这实际上是一个非常糟糕的做法。

— Automagisch 2014年

2

@KoenHoutman，在撰写本文时（2008年），它是唯一得到合理支持的技术。即使在今天，这也不是一个坏习惯，仍然是拥有最广泛浏览器支持的技术，尽管我同意今天（在大多数情况下）我会选择使用:beforeMarc的以下答案。

— Prestaul 2014年

由于您仅更改文本的显示方式，因此使用b标签会更合适。

— Supuhstar 2014年

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>

— 马克
source

与公认的答案相比，这是CSS3更为简洁的方法

— Minni

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工作草案的一部分，尚不能在任何主流浏览器中使用。

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

— Supuhstar
source

6

<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

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

— 乔纳森·阿克尔
source

由于您仅更改文本的显示方式，因此使用b标签会更合适。

— Supuhstar 2014年

1

撰写本文时，b标签处于弃用状态，而赞成使用strong标签。但是，是的，您是对的，现在ab标签会更合适。

— 乔纳森·阿奎尔

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>

您应该使用<span>。同样，不推荐使用<b>。

— the_drow 2013年

2

指向@the_drow的计数器，不建议使用<b>。stackoverflow.com/questions/1348683/...

— Strixy

设置应用于特定选择器的默认颜色可以解决我的问题。感谢您的提示。

— 大卫

2

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

ul {
  list-style-image:url('gray-bullet.gif');
}

— ghr
source

1

OP显然不想使用图片，但是我碰到了这种情况，正在寻找一种通用的方法来替换项目符号。因此，我认为这个答案对完整性很有益。

— Zane

这是一个带有SVG圆圈的圆圈，可以轻松地对其进行着色：

list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='#ff0000' /%3E%3C/svg%3E");

— Ciantic

0

用范围（或其他元素）将列表项中的文本换行，并将项目符号颜色应用于列表项，将文本颜色应用于范围。

0

根据W3C规范，

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

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

— 永旺
source

0

<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>

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
});

— 阿拉斯德克
source

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 。

— 蛋黄
source

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

— 穆罕默德
source

-1

您可以使用CSS实现此目的。通过以您选择的颜色和样式指定列表，您还可以将文本指定为其他颜色。

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

-1

<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

一

二

三

— 书呆子
source

-2

只需使用CSS：

<li style='color:#e0e0e0'>something</li>

— Diodeus-詹姆斯·麦克法兰
source

是的，这也是我的想法...但是样式li的颜色会更改文本和项目符号的颜色。

— 永世

-5

您将要通过CSS设置“列表样式”，并为其指定一个color：值。例：

ul.colored {list-style: color: green;}

— 阿霍克利
source