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

Question

相关代码:http://codepen.io/anon/pen/ocptF/

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

我想使用CSS attr函数填写content一些伪元素.然而,它打印出来004时,HTML属性设置为\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规范:

attr(X)
此函数以字符串形式返回选择器主题的属性X的值.CSS处理器不解析该字符串.[...]

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

编辑:[...]基本上,我认为CSS attr()将字面上复制HTML属性,但事实并非如此.

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

例如,如果源以原始HTML标记表示,那么如上所述,您将需要使用HTML字符转义,因为HTML由HTML解析器解析.如果使用基于JS的模板引擎(如Jade)生成元素,则字符转义采用\u后跟十六进制代码点的形式.在这两种情况下,相应的解析器将转义序列转换为它们的代表性字符,并且字符本身是作为属性值的一部分存储在DOM中的字符.

当然,再次总是可以直接使用Unicode字符.如果您的源文件都编码为UTF-8,则直接使用这些字符应该没有问题.