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

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

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

Mark Cidade.. 112

反斜杠:

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

另请参见使用CSS命名空间(MSDN)

这个答案在兼容模式下对IE8不起作用.[这个问题的另一个答案](http://stackoverflow.com/a/656463/232593)确实有效.基本上`\ 3A`而不是`\:`. (8认同)

我发现IE7不支持反斜杠. (7认同)

我刚刚遇到Magento在ID中用冒号命名元素的问题,这个答案是一个很大的帮助.只是想感谢你,并给你一点点upvote. (2认同)

---

jomohke.. 91

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

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

例:

input#search_form\3A expression {  }

这适用于所有浏览器:包括IE6 +(可能更早？),Firefox,Chrome,Opera等.它是CSS2标准的一部分.

1> Mark Cidade..：

---

反斜杠:

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

另请参见使用CSS命名空间(MSDN)

---

这个答案在兼容模式下对IE8不起作用.[这个问题的另一个答案](http://stackoverflow.com/a/656463/232593)确实有效.基本上`\ 3A`而不是`\:`.

---

我发现IE7不支持反斜杠.

---

我刚刚遇到Magento在ID中用冒号命名元素的问题,这个答案是一个很大的帮助.只是想感谢你,并给你一点点upvote.

2> jomohke..：

---

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

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

例:

input#search_form\3A expression {  }

这适用于所有浏览器:包括IE6 +(可能更早？),Firefox,Chrome,Opera等.它是CSS2标准的一部分.

---

我认为这应该是公认的答案,因为它具有跨浏览器功能.谢谢分享jomohke.

3> Mathias Byne..：

---

本文将告诉您如何转义CSS中的任何字符.

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

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

从技术上讲,冒号字符可以转义为\:,但是在IE <8中不起作用,所以你必须使用\3a:

#search\_form\3a expression {}

4> Wayne..：

---

您可以使用反斜杠将其转义

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”完全相同。