更改列表中项目符号的颜色答案

【问题标题】：Change color of bullets in a list更改列表中项目符号的颜色
【发布时间】：2015-09-11 16:43:17
【问题描述】：

是否有现代的 CSS 解决方案来改变项目符号的颜色？

它应该适用于所有类型的子弹。

光盘样式

十进制样式

等

我的列表如下所示：

<ul>
     <li>Lorem ipsum dolor sit amet</li>
     <li>Lorem ipsum dolor sit amet</li>
</ul>

我无法更改此标记。

请不要给出这样的解决方案：

<ul>
     <li><span>Lorem ipsum dolor sit amet</span></li>
     <li><span>Lorem ipsum dolor sit amet</span></li>
</ul>

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

这需要更改标记

或

li:before {
    content: "• ";
    color: red; 
}

这仅适用于一种列表样式类型

【问题讨论】：

使用您在上一个示例中提出的解决方案类型有什么问题？毕竟，编号列表和项目符号列表是不同的野兽——一个的元素用<ul> 包裹，另一个的元素用<ol> 包裹。如果您准备为 ul 元素和 ol 元素设置不同的规则，那么纯 CSS 解决方案是微不足道的。
是的，没错。我忘了补充。对于十进制枚举，我有
1. ... 标记。但是对于
  ... 有不同的列表样式类型。
当然，那么您如何区分不同ul 列表的不同期望输出？
他们有不同的类。
那么大概，他们都已经有了针对他们的 css 规则。我只是将相关的属性放入这些规则中并完成它。我看到你已经接受了一个答案，所以我想你已经得到了一个令人满意的解决方案。无论如何，我刚刚发现了 li 规则的几个属性，我以前不知道，干杯。 :) 这是我用于 ol 及其项目的两个 - ol { counter-reset: item } 和 ol li:before{ content: counter(item) ". "; counter-increment: item; color: red;}

标签： css list

【解决方案1】：

CSS3 规范定义了一个 ::marker 伪元素来做你想做的事。但是，截至今天，没有浏览器支持此选项。

Firefox 有一个非常相似的元素，但当然这是特定于浏览器的：

li::-moz-list-bullet {
  color: red;
}

实际上：不，目前没有针对您的问题的解决方案。通常，您会按照自己的建议使用span 或:before。

编辑：对于编号列表，您甚至可以这样做：

<head>
  <style type="text/css">
    li:before {
      content: counter(counter) ". ";
      color: red;
    }
    li {
      list-style-type: none;
      counter-increment: counter;
    }
  </style>
</head>

<body>

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

</body>

编辑2：解决方案attr(data-bullet)：

<head>
  <style type="text/css">
    ul.custom {
      list-style: none;
    }

    ul.custom li:before {
      display: inline-block;
      content: attr(data-bullet);
      color: red;
      width: 30px;
    }
  </style>
</head>

<body>

<ul class="custom">
  <li data-bullet="a">Item 1</li>
  <li data-bullet="b">Item 2</li>
  <li data-bullet="ba">Item 3.1<br/>
</ul>

</body>

【讨论】：

我以为我曾经看到过data attr 之类的解决方案。
当然，您也可以使用attr(data-bullet) 设置content，但这也需要更改标记。基本上，它与上面提出的解决方案相同。
非常感谢。这对我有帮助。
在我最初的回答中添加了attr(data-bullet) 的另一个示例。