在CSS选择元素ID处理冒号[复制](Handling a colon in an element

这个问题已经在这里有一个答案：

如何使用JSF生成的HTML元素ID与结肠癌：在CSS选择器“”？ 2个回答

JSF被设定的输入字段的ID search_form:expression 。我需要指定元素上的一些样式，但冒号看起来像一个伪元素的浏览器，它被标记为无效，并忽略的开始。反正是有逃避冒号或东西吗？

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

Answer 1:

反斜杠：

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

另请参阅使用的CSS命名空间 （MSDN）

Answer 2:

冒号前使用反斜杠不IE的许多版本（;可能的其他特别6和7）的工作。

一种解决方法是使用十六进制码的结肠 - 这是\ 3A

例：

input#search_form\3A expression {  }

这适用于所有的浏览器：包括IE6 +（甚至更早？），火狐，Chrome，Opera等它的一部分CSS2标准。

Answer 3:

这篇文章将告诉你如何逃避CSS任何字符。

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

TL; DR所有其他的这个问题的答案是不正确的。你需要的逃生下划线（防止从IE6完全在一些边缘情况无视规则）和冒号的选择，以在不同浏览器正常工作。

技术上，冒号字符可以被转义为\:但这并不在IE <8工作，所以你必须使用\3a ：

#search\_form\3a expression {}

Answer 4:

你可以用一个反斜杠转义

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

从CSS规范

4.1.3字符和大小写

以下规则总是抱着：

所有CSS样式表都是大小写不敏感，除了不在CSS控制之下的部分。例如，HTML的值的情况下，灵敏度属性的字体名称的“ID”和“类”，和URI的位于本说明书的范围之外。请特别注意，元素名称是区分大小写的HTML，但区分大小写的XML。在CSS中，标识符（包括元素名，类和在选择器的ID）可以只包含字符[A-Z0-9]和ISO 10646个字符U + 00A1和更高的，再加上连字符（ - ）和下划线（_） ; 他们不能以数字或一个连字符后面跟着一个数字开始。标识符也可以包含转义字符和任何ISO 10646字符作为一个数字代码（见下项）。例如，标识符 “B＆W？” 可被写为 “B \＆W \？” 或 “B \ 26 w ^ \ 3F”。需要注意的是Unicode是码逐码相当于ISO 10646（见[UNICODE]和[ISO10646]）。

在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”是完全相同的标识符作为“测试”。

Answer 5:

在JSF 2.0，你可以使用web.xml文件javax.faces.SEPARATOR_CHAR的INIT-PARAM指定分隔符

读这个：

是否有可能改变JSF元素ID分离？

Answer 6:

我曾用冒号同样的问题，我无法改变他们（无法访问代码outputing冒号），我想用用jQuery CSS3选择器来接他们。

我把它放在这里，因为它可能是有用的人

input[id="something:something"]在jQuery选择工作得很好，它可能在样式表中工作，以及（可能有浏览器的问题）

Answer 7:

我在ADF框架工作，我很多时候都使用jQuery选择元素。此格式为我工作。这也适用于IE8。

$('[id*="gantt1::majorAxis"]').css('border-top', 'solid 1px ' + mediumGray);

Answer 8:

我发现只有这个格式为我工作IE7（火狐太），我用JSF / ICEfaces的1.8.2。

Say form id=FFF, element id=EEE

var jq=jQuery.noConflict();
jq(document).ready(function() {
jq("[id=FFF:EEE]").someJQueryLibFunction({ jQuery lib function options go here })
});

文章来源: Handling a colon in an element ID in a CSS selector [duplicate]