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

JSF 将输入字段的 ID 设置为 search_form:expression。我需要为这个元素指定一些样式，但是这个冒号看起来像浏览器中一个伪元素的开头，所以它被标记为无效并被忽略。有办法逃出结肠吗？

input#search_form:expression {
///...
}
62334 次浏览
小开
最佳答案

反斜杠:

input#search_form\:expression {  ///...}
  • 另见 在 CSS 中使用命名空间(MSDN)
小开

你可以用反斜杠来避免

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

来自 < a href = “ http://www.w3.org/TR/CSS21/syndata.html # words”rel = “ noReferrer”> CSS Spec

4.1.3字符和大小写

以下规则始终有效:

所有 CSS 样式表都不区分大小写，除了不受 CSS 控制的部分。例如，HTML 属性“ id”和“ class”的值、字体名称和 URI 的大小写敏感性超出了本规范的范围。特别要注意的是，元素名称在 HTML 中不区分大小写，但在 XML 中区分大小写。 在 CSS 中，标识符(包括选择器中的元素名称、类和 ID)只能包含字符[ a-z0-9]和 ISO 10646字符 U + 00 A1或更高，加上连字符(-)和下划线(_) ; 它们不能以数字开头，或者连字符后跟数字。标识符还可以包含转义字符和任何 ISO10646字符作为数字代码(参见下一项)。例如，标识符“ B & W?”可以写成“ B & W?”或“ B26W3F”。 请注意，UNICODE 逐个代码相当于 ISO10646(请参阅[ UNCODE ]和[ ISO10646])。

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

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

第三，反斜杠转义允许作者引用他们不能轻易放入文档中的字符。在这种情况下，反斜杠后面最多跟六个十六进制数字(0。9点。F) ，代表该数字的 ISO10646([ 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 应该显示一个可见的符号，如“缺少字符”字形(参考15.2，第5点)。

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

小开

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

一个解决方案是使用十六进制代码的冒号-这是3A

例如:

input#search_form\3A expression {  }

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

小开

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

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

input[id="something:something"] 在 jQuery 选择器中运行良好，在样式表中也可以运行良好(可能存在浏览器问题)

小开

在 JSF 2,0中，您可以使用 web.xml 文件作为 javax.faces.SEPARator _ CHAR 的 init-param 来指定分隔符

看看这个:

小开

我发现只有这种格式适用于 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 中转义任何字符。

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

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

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

#search\_form\3a expression {}
小开

我使用的是 ADF 框架，并且经常需要使用 JQuery 来选择元素。这种格式适合我。这也适用于 IE8。

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

提交答案