CSS data-content 属性转义反斜杠答案

【问题标题】：CSS data-content attribute escapes backslashesCSS data-content 属性转义反斜杠
【发布时间】：2015-09-09 18:37:54
【问题描述】：

所以，我有以下 HTML 结构：

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

当在 CSS 中使用 data-content 属性读取内容时：

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

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

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

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

提前致谢，多里安

【问题讨论】：

如何转义斜线，即“\\ec00”？
试过了，按原样输出，\\ec00

标签： html css attributes attr backslash

【解决方案1】：

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

你可以做的是：

使用字符本身，即data- 属性中的“�”
使用将由浏览器解析的数字（十进制）等效值：&#60416;（因为十六进制的 ec00 是十进制的 60416，\ec00 用于强制在 CSS 中解析，而 @987654328 @ 用于表示 HTML 中的小数实体）

例如版权符号：

十进制：169。在 HTML 中，您将使用 &#169;
十六进制：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>

【讨论】：

嘿特里，非常感谢您的详细评论，现在事情真的很有意义！ :) 干杯！