Question

使用JSF Web应用程序框架时，框架内部元素的ID可以由框架自动生成，当组件驻留在其ID为form1的表单中时，框架会自动生成一个ID该元素的form1:foo形式。虽然可以关闭它，但我想知道是否可以为其ID为foo:bar形式的元素定义CSS ID选择器。

提前致谢。

Answer 1

您可以使用\来逃避冒号。

#foo\:bar {
    color: red;
}

也适用于jQuery选择器。

另见：

How to use JSF generated HTML element ID with colon ":" in CSS selectors?
By default, JSF generates unusable ids, which are incompatible with css part of web standards

Answer 2

根据W3c spec中链接的this answer，如果未使用转义，则在元素ID中使用冒号是完全错误的。

在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符[a-z0-9]和ISO 10646字符U + 00A1和更高，加上连字符（ - ）和下划线（_）;它们不能以数字开头，也不能以数字后跟连字符开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项）。例如，标识符“B＆amp; W？”可以写成“B \＆amp; W \？”或“B \ 26 W \ 3F”。

JSF框架是否真的在最终呈现的HTML中输出这些ID？

Answer 3

我做了一些关于如何在CSS中转义任何字符的研究，并在此处写了一篇：http://mathiasbynens.be/notes/css-escapes请注意，规范没有明确提及这些特性。

我还创建了一个工具，可以自动转义任何字符序列，以便在CSS和/或JavaScript中使用：http://mothereff.in/css-escapes#0foo%3Abar

用于其id为“foo：bar”形式的元素的CSS选择器

3 个答案:

另见：