Question

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

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

Answer 1

反斜杠：

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

另请参阅 Using Namespaces with CSS （MSDN）

Answer 2

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

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

示例：

input#search_form\3A expression {  }

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

Answer 3

This article将告诉您如何转义CSS中的任何字符。

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

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

从技术上讲，冒号字符可以转义为\:，但这在IE＆lt; 1中不起作用。 8，所以你必须使用\3a：

#search\_form\3a expression {}

Answer 4

你可以用反斜杠

来逃避它

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

来自CSS Spec

4.1.3字符和案例

以下规则始终有效：

除了不受CSS控制的部分外，所有CSS样式表都不区分大小写。例如，HTML属性“id”和“class”，字体名称和URI的值的区分大小写超出了本规范的范围。请特别注意，元素名称在HTML中不区分大小写，但在XML中区分大小写。在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符[a-z0-9]和ISO 10646字符U + 00A1和更高，加上连字符（ - ）和下划线（_） ;它们不能以数字开头，也不能以数字后跟连字符开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项）。例如，标识符“B＆amp; W？”可以写成“B \＆amp; 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”（“＆amp; B”）。在这种情况下，用户代理应将“CR / LF”对（U + 000D / U + 000A）视为单个空白字符。通过提供正好6个十六进制数字：“\ 000026B”（“＆amp; B”）实际上，这两种方法可以结合起来。在十六进制转义后，只忽略一个空白字符。请注意，这意味着转义序列之后的“真实”空格本身必须进行转义或加倍。

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

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

Answer 5

我对冒号有同样的问题，我无法更改它们（无法访问输出冒号的代码），我想用CSS3选择器和jQuery获取它们。

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

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

Answer 6

在JSF 2,0中，您可以使用web.xml文件指定分隔符作为javax.faces.SEPARATOR_CHAR的初始参数

阅读本文：

Is it possible to change the element id separator in JSF?

Answer 7

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

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

Answer 8

我发现只有这种格式适用于IE7（Firefox也是如此），我使用的是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 })
});

在CSS选择器中处理元素ID中的冒号

8 个答案: