3

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

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

我想使用 CSSattr函数来填充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;
}

谢谢！

4

1 回答 1

5

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

于 2014-03-24T03:20:51.173 回答