html中的特殊字符在css内容中，使用attr（） [英] html special characters in css content, using attr()

问题描述

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

编辑：这个codepen使用Jade，因此混乱了几件事。我不知道这个，当开始这个问题。
基本上，我认为CSS attr（）将在HTML属性上复制，但实际上不是这样。

我想使用CSS attr 函数为某些伪元素填写内容。但是，当HTML属性设置为 \f004 和时，将打印 004

相关行：

HTML：

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

CSS：

 code> .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）

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

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

编辑：[...]基本上，我认为CSS attr（）将复制一个HTML属性的字面上，但事实并非如此。

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

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

当然，再次总是有直接使用Unicode字符的替代方法。如果您的源文件都编码为UTF-8，您应该没有问题直接使用字符。

Relevant codepen: http://codepen.io/anon/pen/ocptF/

EDIT: The codepen uses Jade, and thus messes a few things up. I was not aware of this when starting this question. Essentially, I thought CSS attr() would copy over an HTML attribute literally, but that is not the case.

I'd like to use the CSS attr function to fill in the content for some pseudoelements. However, it prints out 004 when the HTML attribute is set to \f004, and 08fa when \f08fa.

Relevant lines:

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;
}

Thanks!

解决方案

Escape sequences in CSS are only treated specially in CSS syntax. When you specify it in an HTML attribute value then use that value in CSS attr(), it is taken literally. From the CSS2.1 spec:

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. [...]

Since you're specifying character codes in HTML attribute values, you can either use HTML character references, entity references or the Unicode characters themselves. It's worth noting that the two character codes you have do not appear to be valid, however, so they may not work at all.

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

It copies the attribute value according to the DOM, which may be different from how it is represented in the source, e.g. the source markup, or the script that is generating the element.

For example, if the source is represented in raw HTML markup, then as I mention above, you will need to use HTML character escapes, because HTML is parsed by an HTML parser. If the elements are generated using a JS-based template engine such as Jade, then the character escapes take the form of \u followed by the hexadecimal code-points. In both cases, the respective parsers will translate the escape sequences into their representative characters, and the characters themselves are what is stored in the DOM as part of the attribute value.

Of course, again there's always the alternative of just using the Unicode characters directly. If your source files are all encoded as UTF-8, you should have no problem using the characters directly.

这篇关于html中的特殊字符在css内容中，使用attr（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！