关于css：在不使用span的情况下更改HTML列表的项目符号颜色


Change bullets color of an HTML list without using span

我想知道是否有办法改变列表中子弹的颜色。

我有一个这样的列表：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul>

   
<li>
House
</li>

   
<li>
Car
</li>

   
<li>
Garden
</li>


</ul>

我不可能在li中插入任何内容，例如'span'og a'p'。 那么我能以某种聪明的方式改变子弹的颜色而不是文本吗？

我在没有添加标记的情况下管理了这个，而是使用li:before。这显然具有:before的所有限制(没有旧的IE支持)，但在经过一些非常有限的测试之后，它似乎适用于IE8，Firefox和Chrome。子弹样式也受到unicode内容的限制。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
li {
  list-style: none;
}
li:before {
  /* For a round bullet */
  content: '\2022';
  /* For a square bullet */
  /*content:'\25A0';*/
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>

 
<li>
foo
</li>

 
<li>
bar
</li>


</ul>

相关讨论

如果您可以使用图像，那么您可以这样做。如果没有图像，您将无法仅更改项目符号的颜色，也无法更改文本。

使用图像

1
li { list-style-image: url(images/yourimage.jpg); }

看到

列表样式图像

不使用图像

然后，您必须编辑HTML标记并在列表中包含一个范围，并使用不同的颜色为li和span着色。

相关讨论

我们可以将list-style-image和svg组合起来，我们可以在css中内联！这种方法提供了令人难以置信的"子弹"控制，它可以成为任何东西。

要获得一个红色圆圈，只需使用以下css：

1
2
3
ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}

但这只是一个开始。这允许我们用这些子弹做任何我们想要的疯狂事情。圆形或矩形很容易，但是你可以用svg绘制的任何东西都可以粘在那里！看看下面的靶心示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/></svg>');
}
ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');
}
ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="3"/></svg>');
}
ul ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');
}
ul.bulls-eye {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
ul.multi-color {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<ul>

 
<li>

    Big circles!

   
<ul>

     
<li>
Big rectangles!
</li>

     
<li>
b
       
<ul>

         
<li>
Small circles!
</li>

         
<li>
c
           
<ul>

             
<li>
Small rectangles!
</li>

             
<li>
b
</li>

           
</ul>

         
</li>

       
</ul>

     
</li>

   
</ul>

 
</li>

 
<li>
b
</li>


</ul>


<ul class="bulls-eye">
 
<li>
Bulls
</li>

 
<li>
eyes.
</li>


</ul>


<ul class="multi-color">
 
<li>
Multi
</li>

 
<li>
color
</li>


</ul>

宽度/高度属性

某些浏览器需要在上设置width和height属性，否则它们不显示任何内容。在撰写本文时，最新版本的Firefox出现了这个问题。我在示例中设置了两个属性。

编码

最近的一条评论让我想起了数据的编码。这对我来说是一个痛点，我可以分享一些我研究过的信息。

引用URI规范的data-uri规范说svg应该根据URI规范进行编码。这意味着应对所有类型的字符进行编码，例如<变为%3C。

一些来源建议使用base64编码，这应该可以解决编码问题，但是它会不必要地增加SVG的大小，而URI编码却不会。我建议使用URI编码。

更多信息：

浏览器支持：> ie8

sss上的css技巧

svgs上的mdn

相关讨论

建立@Marc的解决方案 - 由于子弹角色以不同的字体和浏览器呈现不同，我使用以下css3技术和border-radius来制作一个我可以更多控制的子弹：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
li:before {
    content: '';
    background-color: #898989;
    display: inline-block;
    position: relative;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin-right: 4px;
    top: 2px;
}
相关讨论

我知道这是一个非常非常古老的问题，但我正在玩这个，并提出了一种我没见过的方式。 为列表指定一种颜色，然后使用::first-line选择器覆盖文本颜色。 我不是专家，所以也许我错过了这种方法有问题，但似乎有效。

1
2
3
4
5
6
7
li {
  color: blue;
}

li::first-line {
  color: black;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul>

 
<li>
House
</li>

 
<li>
Car
</li>

 
<li>
Garden
</li>


</ul>

相关讨论

建立@Marc和@jessica解决方案 - 这是我使用的解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
li {
   position:relative;
}
li:before {
      content:'';
      display: block;
      position: absolute;
      width: 6px;
      height:6px;
      border-radius:6px;
      left: -20px;
      top: .5em;
      background-color: #000;
}

我使用em表示字体大小，因此如果将top值设置为.5em，它将始终位于第一行文本的中点。我使用left:-20px，因为这是浏览器中项目符号的默认位置：parent padding/2

我也非常喜欢Marc的答案 - 我需要一套不同颜色的UL，显然使用一个类更容易。这是我用于橙色的东西，例如：

1
2
3
4
5
6
7
8
9
10
11
12
ul.orange {
    list-style: none;
    padding: 0px;
}
ul.orange > li:before {
    content: '\25CF ';
    font-size: 15px;
    color: #F00;
    margin-right: 10px;
    padding: 0px;
    line-height: 15px;
}

另外，我发现我用于"内容："的十六进制代码与Marc不同(六角形圆圈看起来有点太高)。我用的那个似乎完全坐在中间。我还在这里找到了其他几种形状(正方形，三角形，圆形等)

::标记

您可以使用::marker CSS伪元素来选择列表项的标记框(即项目符号或数字)。

1
2
3
ul li::marker {
  color: red;
}

Note: At the time of posting this answer, this is considered experimental technology and has only been implemented in Firefox and Safari (so far).

相关讨论

对我来说，最好的选择是使用CSS伪元素，因此对于disc子弹样式，它看起来像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
ul {
  list-style-type: none;
}

li {
  position: relative;
}

li:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px; /* adjust to suit your needs */
  height: 5px; /* adjust to suit your needs */
  border-radius: 50%;
  left: -15px; /* adjust to suit your needs */
  top: 0.5em;
  background: #f00; /* adjust to suit your needs */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul>

 
<li>
first
</li>

 
<li>
second
</li>

 
<li>
third
</li>


</ul>

笔记：

  • width和height应该具有相同的值以保持指针四舍五入
  • 如果要拥有square列表项目符号，可以将border-radius设置为零

对于更多项目符号样式，您可以使用其他CSS形状https://css-tricks.com/examples/ShapesOfCSS/(选择不需要伪元素的项目，例如三角形)

请尝试使用此代码：

1
2
3
ul {
  color: red;
}

我今天尝试了这个并输入了这个：
我需要在列表中显示颜色标记(子弹和数字)。 我发现了这个提示并在我的样式表中写入了属性的相互作用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
}
ul {}
ol {
  counter-reset: li;
}
li {
  padding-left: 1em;
}
ul li {}
ul li::before,
ol li::before {
  color: #91be3c;
  display: inline-block;
  width: 1em;
}
ul li::before {
  content:"\25CF";
  margin: 0 0.1em 0 -1.1em;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: counter(li);
  margin: 0 0 0 -1em;
}

我选择了一个不同的角色来展示一颗子弹，在这里观看。 我需要适当调整保证金，可能这些值不适用于您选择的字体(数字使用您的网页)。

建立在@ddilsaver的答案之上。我希望能够使用精灵作为子弹。这似乎有效：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
li {
  list-style: none;
  position: relative;
}

li:before {
  content:'';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: -30px;
  top: 5px;
  background-image: url(i20.png);
  background-position: 0px -40px; /* or whatever offset you want */
}