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中，您将在JS中使用\00A9，您将使用\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>