有没有一种简单的方法来改变列表中子弹的颜色？

Question

有没有一种简单的方法来改变列表中子弹的颜色？

Dav*_*nes 83 html css html-lists

我想要的是能够将列表中的子弹颜色更改为浅灰色.它默认为黑色,我无法弄清楚如何更改它.

我知道我可以使用图像; 如果我能帮助它,我宁愿不这样做.

Answer 1

Pre*_*aul 157

子弹从文本中获取颜色.因此,如果您希望使用与列表中的文本不同的颜色项目符号,则必须添加一些标记.

在一个范围中包装列表文本:

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

Run Code Online (Sandbox Code Playgroud)

然后稍微修改您的样式规则:

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

Run Code Online (Sandbox Code Playgroud)

@KoenHoutman,在撰写本文时(2008年),它是唯一得到合理支持的技术.即使在今天这也不是一个糟糕的做法,仍然是最广泛的浏览器支持的技术,虽然我同意今天(在大多数情况下)我会选择使用`:before`,如下面Marc的答案. (2认同)

Answer 2

Mar*_*arc 44

我在没有添加标记的情况下管理了这个,而是使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 3

Sup*_*tar 16

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

Run Code Online (Sandbox Code Playgroud)

JSFiddle示例

但请注意,截至2016年7月,此解决方案仅是W3C工作草案的一部分,但尚未在任何主流浏览器中使用.

如果您需要此功能,请执行以下操作:

Answer 4

Jon*_*ell 5

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

Run Code Online (Sandbox Code Playgroud)

这种方法的一个大问题是额外的标记.(span标签)

归档时间：	17 年，4 月前
查看次数：	179077 次
最近记录：	8 年，4 月前