css内容中的html特殊字符，使用attr()

Question

相关codepen：http://codepen.io/anon/pen/ocptF/

编辑：codepen 使用 Jade，因此搞砸了一些事情。开始这个问题时我没有意识到这一点。 本质上，我认为 CSS attr() 会从字面上复制 HTML 属性，但事实并非如此。

我想使用 CSS attr 函数来填充 content 的一些伪元素。但是，当 HTML 属性设置为\f004 时，它会打印出004，而当\f08fa 时，它会打印出08fa。

相关行：

HTML：

<div class="zoomfade" data-fill='\f004' data-unfill='\f08a'></div>

CSS：

.zoomfade:before {
  content: attr(data-unfill);
  position: absolute;
}

.zoomfade:before {
  content: attr(data-fill);
  position: absolute;
}

谢谢！

Answer 1

CSS 中的转义序列仅在 CSS 语法中被特殊处理。当您在 HTML 属性值中指定它然后在 CSS attr() 中使用该值时，它是按字面意思理解的。来自CSS2.1 spec：

attr(X)
此函数将选择器主题的属性 X 的值作为字符串返回。 CSS 处理器不解析字符串。 [...]

由于您在 HTML 属性值中指定字符代码，您可以使用 HTML 字符引用、实体引用或 Unicode 字符本身。值得注意的是，您拥有的两个字符代码似乎无效，因此它们可能根本不起作用。

编辑：[...] 本质上，我认为 CSS attr() 会从字面上复制 HTML 属性，但事实并非如此。

它根据 DOM 复制属性值，这可能与它在源中的表示方式不同，例如源标记，或生成元素的脚本。

例如，如果源是用原始 HTML 标记表示的，那么正如我上面提到的，您将需要使用 HTML 字符转义，因为 HTML 是由 HTML 解析器解析的。如果元素是使用基于 JS 的模板引擎（例如 Jade）生成的，则字符转义采用 \u 后跟十六进制代码点的形式。在这两种情况下，各自的解析器都会将转义序列翻译成它们的代表字符，而这些字符本身就是作为属性值的一部分存储在 DOM 中的。

当然，同样也总是可以直接使用 Unicode 字符。如果你的源文件都编码为 UTF-8，那么直接使用字符应该没有问题。