处理 CSS 选择器中元素 ID 中的冒号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/122238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Handling a colon in an element ID in a CSS selector
提问by sblundy
JSF is setting the ID of an input field to search_form:expression. I need to specify some styling on that element, but that colon looks like the beginning of a pseudo-element to the browser so it gets marked invalid and ignored. Is there anyway to escape the colon or something?
JSF 正在将输入字段的 ID 设置为search_form:expression. 我需要在该元素上指定一些样式，但该冒号在浏览器中看起来像是伪元素的开头，因此它被标记为无效并被忽略。反正有没有逃脱冒号之类的？
input#search_form:expression {
///...
}
采纳答案by Mark Cidade
Backslash:
反斜杠：
input#search_form\:expression { ///...}
- See also Using Namespaces with CSS(MSDN)
- 另请参阅在 CSS 中使用命名空间(MSDN)
回答by jomohke
Using a backslash before the colon doesn't work in many versions of IE (particularly 6 and 7; possibly others).
在许多版本的 IE（尤其是 6 和 7；可能还有其他版本）中，在冒号前使用反斜杠不起作用。
A workaround is to use the hexadecimal code for the colon - which is \3A
一种解决方法是对冒号使用十六进制代码 - 即 \3A
example:
例子：
input#search_formA expression { }
This works in all browsers: Including IE6+ (and possibly earlier?), Firefox, Chrome, Opera, etc. It's part of the CSS2 standard.
这适用于所有浏览器：包括 IE6+（可能更早？）、Firefox、Chrome、Opera 等。它是CSS2 标准的一部分。
回答by Mathias Bynens
This articlewill tell you how to escape any character in CSS.
本文将告诉你如何在 CSS 中转义任何字符。
Now, there's even a tool for it: http://mothereff.in/css-escapes#0search%5fform%3Aexpression
现在，甚至还有一个工具：http: //mothereff.in/css-escapes#0search%5fform%3Aexpression
TL;DR All the other answers to this question are incorrect. You need to escape both the underscore (to prevent IE6 from ignoring the rule altogether in some edge cases) and the colon character for the selector to work properly across different browsers.
TL;DR 这个问题的所有其他答案都不正确。您需要同时转义下划线（以防止 IE6 在某些边缘情况下完全忽略规则）和冒号字符，以便选择器在不同浏览器中正常工作。
Technically, the colon character can be escaped as \:, but that doesn't work in IE < 8, so you'll have to use \3a:
从技术上讲，冒号字符可以转义为\:，但这在 IE < 8 中不起作用，因此您必须使用\3a：
#search\_forma expression {}
回答by Wayne
You can escape it with a backslash
你可以用反斜杠转义它
input#search_form\:expression {
///...
}
From the CSS Spec
来自CSS 规范
4.1.3 Characters and case
4.1.3 字符和大小写
The following rules always hold:
以下规则始终成立：
All CSS style sheets are case-insensitive, except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML. In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". Note that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE] and [ISO10646]).
所有 CSS 样式表都不区分大小写，除了不受 CSS 控制的部分。例如，HTML 属性“id”和“class”、字体名称和 URI 的值的大小写敏感不在本规范的范围内。请特别注意，元素名称在 HTML 中不区分大小写，但在 XML 中区分大小写。在 CSS 中，标识符（包括元素名称、类和选择器中的 ID）只能包含字符 [a-z0-9] 和 ISO 10646 字符 U+00A1 及更高，加上连字符 (-) 和下划线 (_) ; 它们不能以数字开头，也不能以连字符后跟数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（参见下一项）。例如，标识符“B&W？” 可以写成“B\&W\?” 或者 ”
In CSS 2.1, a backslash () character indicates three types of character escapes. First, inside a string, a backslash followed by a newline is ignored (i.e., the string is deemed not to contain either the backslash or the newline).
在 CSS 2.1 中，反斜杠 () 字符表示三种类型的字符转义。首先，在字符串中，反斜杠后跟换行符被忽略（即，字符串被视为不包含反斜杠或换行符）。
Second, it cancels the meaning of special CSS characters. Any character (except a hexadecimal digit) can be escaped with a backslash to remove its special meaning. For example, "\"" is a string consisting of one double quote. Style sheet preprocessors must not remove these backslashes from a style sheet since that would change the style sheet's meaning.
其次，它取消了特殊 CSS 字符的含义。任何字符（十六进制数字除外）都可以使用反斜杠进行转义以去除其特殊含义。例如，"\"" 是一个由一个双引号组成的字符串。样式表预处理器不能从样式表中删除这些反斜杠，因为这会改变样式表的含义。
Third, backslash escapes allow authors to refer to characters they can't easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ([ISO10646]) character with that number, which must not be zero. (It is undefined in CSS 2.1 what happens if a style sheet does contain a character with Unicode codepoint zero.) If a character in the range [0-9a-f] follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that:
第三，反斜杠转义允许作者引用他们不能轻易放入文档中的字符。在这种情况下，反斜杠后跟最多六个十六进制数字 (0..9A..F)，代表具有该数字的 ISO 10646 ([ISO10646]) 字符，该数字不能为零。（在 CSS 2.1 中未定义如果样式表确实包含具有 Unicode 代码点为零的字符会发生什么。）如果 [0-9a-f] 范围内的字符跟在十六进制数之后，则需要将数字的结尾清除。有两种方法可以做到这一点：
with a space (or other whitespace character): "\26 B" ("&B"). In this case, user agents should treat a "CR/LF" pair (U+000D/U+000A) as a single whitespace character. by providing exactly 6 hexadecimal digits: "\000026B" ("&B") In fact, these two methods may be combined. Only one whitespace character is ignored after a hexadecimal escape. Note that this means that a "real" space after the escape sequence must itself either be escaped or doubled.
带空格（或其他空白字符）：“\26 B”（“&B”）。在这种情况下，用户代理应该将“CR/LF”对（U+000D/U+000A）视为单个空白字符。通过提供正好 6 个十六进制数字：“\000026B”（“&B”） 事实上，这两种方法可以结合使用。十六进制转义后仅忽略一个空白字符。请注意，这意味着转义序列之后的“真实”空间本身必须被转义或加倍。
If the number is outside the range allowed by Unicode (e.g., "\110000" is above the maximum 10FFFF allowed in current Unicode), the UA may replace the escape with the "replacement character" (U+FFFD). If the character is to be displayed, the UA should show a visible symbol, such as a "missing character" glyph (cf. 15.2, point 5).
如果数字超出 Unicode 允许的范围（例如，“\110000”高于当前 Unicode 中允许的最大 10FFFF），则 UA 可能会用“替换字符”（U+FFFD）替换转义符。如果要显示字符，UA 应显示可见符号，例如“缺少字符”字形（参见 15.2，第 5 点）。
Note: Backslash escapes, where allowed, are always considered to be part of an identifier or a string (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is allowed at the start of a class name, even though "2" is not). The identifier "te\st" is exactly the same identifier as "test".
注意：在允许的情况下，反斜杠转义总是被认为是标识符或字符串的一部分（即，“\7B”不是标点符号，即使“{”是，并且“\32”是允许在开头的类名，即使“2”不是）。标识符“te\st”与“test”完全相同。
回答by naugtur
I had the same problem with colons, and I was unable to change them (couldn't access the code outputing colons) and I wanted to fetch them with CSS3 selectors with jQuery.
我对冒号有同样的问题，我无法更改它们（无法访问输出冒号的代码），我想用 CSS3 选择器和 jQuery 来获取它们。
I put it here, cause it might be helpful for someone
我把它放在这里，因为它可能对某人有帮助
input[id="something:something"]worked fine in jQuery selectors, and it might work in stylesheets as well (might have browser issues)
input[id="something:something"]在 jQuery 选择器中工作正常，它也可能在样式表中工作（可能有浏览器问题）
回答by Krishna
In JSF 2,0, you can specify the separator using the web.xml file as init-param of javax.faces.SEPARATOR_CHAR
在 JSF 2,0 中，您可以使用 web.xml 文件作为 javax.faces.SEPARATOR_CHAR 的 init-param 指定分隔符
Read this:
读这个：
回答by mbokil
I work in a ADF framework and I often times have to use JQuery to select elements. This format works for me. This works in IE8 also.
我在 ADF 框架中工作，我经常不得不使用 JQuery 来选择元素。这种格式对我有用。这也适用于 IE8。
$('[id*="gantt1::majorAxis"]').css('border-top', 'solid 1px ' + mediumGray);
回答by Charles
I found only this format worked for me for IE7 (Firefox too), and I use JSF/Icefaces 1.8.2.
我发现只有这种格式适用于 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 })
});
