Question

编辑：codepen使用Jade，因此混淆了一些东西。在开始这个问题时我没有意识到这一点。从本质上讲，我认为CSS attr（）会从字面上复制HTML属性，但事实并非如此。

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

相关专栏：

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，那么直接使用这些字符应该没有问题。

使用attr（）在css内容中使用html特殊字符

1 个答案: