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


html special characters in css content, using attr()

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

编辑：Codepen使用Jade，因此弄乱了一些东西。 开始这个问题时，我并不知道这一点。
从本质上讲，我认为CSS attr()会照原样复制HTML属性，但事实并非如此。

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

相关行：

HTML：

1
 

CSS：

1
2
3
4
5
6
7
8
9
.zoomfade:before {
  content: attr(data-unfill);
  position: absolute;
}

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

谢谢！

相关讨论

CSS中的转义序列仅在CSS语法中专门处理。当您在HTML属性值中指定该值，然后在CSS attr()中使用该值时，它将按字面意义使用。根据CSS2.1规范：

attr(X)
This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. [...]

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

EDIT: [...] Essentially, I thought CSS attr() would copy over an HTML attribute literally, but that is not the case.

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

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

当然，总有一种选择是直接使用Unicode字符。如果您的源文件都被编码为UTF-8，则直接使用字符应该没有问题。

相关讨论