156

JSF 将输入字段的 ID 设置为search_form:expression. 我需要在该元素上指定一些样式，但是该冒号看起来像是浏览器的伪元素的开头，因此它被标记为无效并被忽略。反正有没有逃避冒号之类的？

input#search_form:expression {
  ///...
}
4

8 回答 8

133

反斜杠：

input#search_form\:expression {  ///...}
于 2008-09-23T16:52:40.847 回答
94

在许多版本的 IE（尤其是 6 和 7；可能还有其他版本）中，在冒号前使用反斜杠不起作用。

一种解决方法是使用冒号的十六进制代码 - 即 \3A

例子：

input#search_form\3A expression {  }

这适用于所有浏览器：包括 IE6+（可能更早？）、Firefox、Chrome、Opera 等。它是CSS2 标准的一部分。

于 2009-03-17T23:52:11.037 回答
11

本文将告诉您如何在 CSS 中转义任何字符。

现在，甚至还有一个工具： http: //mothereff.in/css-escapes#0search%5fform%3Aexpression

TL;DR 这个问题的所有其他答案都不正确。您需要同时转义下划线（以防止 IE6 在某些极端情况下完全忽略该规则）和冒号字符，以便选择器在不同的浏览器中正常工作。

从技术上讲，冒号字符可以转义为\:，但这在 IE < 8 中不起作用，因此您必须使用\3a：

#search\_form\3a expression {}
于 2011-06-05T08:56:41.660 回答
7

你可以用反斜杠转义它

input#search_form\:expression {
  ///...
}

来自CSS 规范

4.1.3 字符和大小写

以下规则始终成立：

所有 CSS 样式表都不区分大小写，除了不受 CSS 控制的部分。例如，HTML 属性“id”和“class”、字体名称和 URI 的值的大小写敏感性超出了本规范的范围。请特别注意，元素名称在 HTML 中不区分大小写，但在 XML 中区分大小写。在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-z0-9] 和 ISO 10646 字符 U+00A1 及更高，加上连字符 (-) 和下划线 (_) ; 它们不能以数字或连字符后跟数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符“B&W？” 可以写成“B\&W\?” 或者 ”

在 CSS 2.1 中，反斜杠 () 字符表示三种类型的字符转义。首先，在字符串中，后跟换行符的反斜杠被忽略（即，字符串被认为不包含反斜杠或换行符）。

其次，它取消了特殊 CSS 字符的含义。任何字符（十六进制数字除外）都可以用反斜杠转义以消除其特殊含义。例如，"\"" 是一个由一个双引号组成的字符串。样式表预处理器不能从样式表中删除这些反斜杠，因为这会改变样式表的含义。

第三，反斜杠转义允许作者引用他们不能轻易放入文档的字符。在这种情况下，反斜杠后跟最多六个十六进制数字 (0..9A..F)，代表带有该数字的 ISO 10646 ([ISO10646]) 字符，该数字不得为零。（在 CSS 2.1 中未定义如果样式表确实包含 Unicode 代码点为零的字符会发生什么。）如果 [0-9a-f] 范围内的字符跟在十六进制数字后面，则需要将数字结尾清除。有两种方法可以做到这一点：

带有空格（或其他空白字符）：“\26 B”（“&B”）。在这种情况下，用户代理应将“CR/LF”对 (U+000D/U+000A) 视为单个空白字符。通过提供正好 6 个十六进制数字： "\000026B" ("&B") 实际上，这两种方法可以结合使用。十六进制转义后仅忽略一个空白字符。请注意，这意味着转义序列之后的“真实”空间本身必须被转义或加倍。

如果数字超出 Unicode 允许的范围（例如，“\110000”高于当前 Unicode 允许的最大 10FFFF），UA 可以用“替换字符”（U+FFFD）替换转义。如果要显示字符，UA 应该显示一个可见符号，例如“缺失字符”字形（参见 15.2，第 5 点）。

注意：在允许的情况下，反斜杠转义总是被认为是标识符或字符串的一部分（即，“\7B”不是标点符号，即使“{”是，并且“\32”允许在开头类名，即使“2”不是）。标识符“te\st”与“test”完全相同。

于 2008-09-23T16:53:30.033 回答
4

我在使用冒号时遇到了同样的问题，我无法更改它们（无法访问输出冒号的代码），我想使用带有 jQ​​uery 的 CSS3 选择器来获取它们。

我把它放在这里，因为它可能对某人有帮助

input[id="something:something"] 在 jQuery 选择器中运行良好，它也可以在样式表中运行（可能存在浏览器问题）

于 2010-02-09T11:42:09.840 回答
4

在 JSF 2,0 中，您可以使用 web.xml 文件将分隔符指定为 javax.faces.SEPARATOR_CHAR 的 init-param

读这个：

于 2011-01-24T01:35:14.353 回答
0

我在 ADF 框架中工作，并且经常不得不使用 JQuery 来选择元素。这种格式对我有用。这也适用于 IE8。

$('[id*="gantt1::majorAxis"]').css('border-top', 'solid 1px ' + mediumGray);
于 2013-10-18T14:50:33.783 回答
-1

我发现只有这种格式适用于 IE7（也适用于 Firefox），并且我使用 JSF/Icefaces 1.8.2。

说表格id=FFF，元素id=EEE

var jq=jQuery.noConflict();
jq（文档）.ready（函数（）{
jq("[id=FFF:EEE]").someJQueryLibFunction({ jQuery lib 函数选项到这里 })
});
于 2011-06-03T19:22:48.877 回答