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

EN

在许多版本的IE (特别是6和7；可能是其他版本)中，在冒号前使用反斜杠不起作用。

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

示例：

input#search_form\3A expression {  }

它适用于所有浏览器:包括IE6+ (可能是更早的版本？)，火狐，Chrome，Opera等等。它是CSS2 standard的一部分。

This article会告诉你如何转义CSS中的任何字符。

现在，甚至有一个工具可以解决这个问题：http://mothereff.in/css-escapes#0search%5fform%3Aexpression

这个问题的所有其他答案都是错误的。您需要转义下划线(以防止IE6在某些边缘情况下完全忽略规则)和冒号字符，选择器才能在不同的浏览器中正常工作。

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

#search\_form\3a expression {}

您可以使用反斜杠对其进行转义

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&W?“可以写成"B\&W\?“或“B\26W\3F”。请注意，Unicode是按代码等效于ISO 10646的代码(请参阅UNICODE和ISO10646)。

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

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

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

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

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

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