html 显示有%3c符号的数据,在不使用span的情况下更改HTML列表的项目符号颜色

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

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

ul {

list-style-image: url('data:image/svg+xml,');

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

ul {

list-style-image: url('data:image/svg+xml,');

}

ul ul {

list-style-image: url('data:image/svg+xml,');

}

ul ul ul {

list-style-image: url('data:image/svg+xml,');

}

ul ul ul ul {

list-style-image: url('data:image/svg+xml,');

}

ul.bulls-eye {

list-style-image: url('data:image/svg+xml,');

}

ul.multi-color {

list-style-image: url('data:image/svg+xml,');

}

• Big circles!

  • Big rectangles!
  • b
    • Small circles!
    • c
      • Small rectangles!
      • b
• b

• Bulls
• eyes.

• Multi
• color

宽度/高度属性 h2>

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

编码 H2>

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

引用URI spec的data-uri spec表示应根据URI spec对svg进行编码。这意味着应该对所有类型的字符进行编码，例如

一些来源建议使用base64编码，它应该修复编码问题，但是它会不必要地增加SVG的大小，而URI编码则不会。我推荐URI编码。