html - CSS data-content 属性转义反斜杠

Question

所以，我有以下 HTML 结构:

<ul>
<li data-content="\ec00"></li>
<li data-content="\ec01"></li>
</ul>

使用CSS中的data-content属性读取内容时:

li:before { content: attr(data-content) }

它显示 ec00 和 ec01，而不是带反斜杠的。

有什么想法可以解决这个问题吗？

背后的想法是为大量图标提供一个颜色选择器。

提前致谢， 多里安

Answer 1

这是因为您使用的字符编码在 HTML 中无法正确解析。请记住，CSS 以纯文本形式访问 data- 属性，并且由于 HTML 不解析十六进制字符，因此 \ec00 不会被解析，因为它应该与它在 CSS 文件中按原样使用。

你可以做的是:

• 使用字符本身，即 data- 属性中的“�”
• 使用等价的数字(十进制)，它将由浏览器解析:(因为十六进制的 ec00 为 60416 以十进制表示，\ec00 在 CSS 中用于强制解析，而 &#...; 在 HTML 中用于表示十进制实体)

版权符号就是一个例子:

• 十进制:169。在 HTML 中，您将使用 ©
• 十六进制:00A9。在CSS中，您将使用\00A9，而在JS中，您将使用\u00A9

这是一个概念验证演示:

li:before { content: attr(data-content); margin-right: 1em; }

<ul>
<li data-content="&#169;">Using <code>&#169;</code>, parsed by HTML engine.</li>
<li data-content="\u00A9">Using <code>\u00A9</code>, will not be parsed by HTML engine.</li>
  <li data-content="\00A9">Using <code>\00A9</code>, will not be parsed by HTML engine.</li>
</ul>