Question

是否有现代的CSS解决方案来改变子弹的颜色？

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

光盘风格

enter image description here

十进制样式

enter image description here

等

我的列表如下所示：

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

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

Answer 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>

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

1 个答案: