无法选择 id=":1" 的 div

Question

对网络东西有点菜鸟，但我有一个带有这个标签的 div：

<div class="" id=":1" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" aria-labelledby=":1.label" aria-setsize="10" aria-posinset="1">

我已经测试过我的 jQuery 可以正常工作（目前使用的是 2.1.3 版）。 我已经测试了许多其他关于选择器中冒号的其他 SO 帖子中推荐的选择器，然后是其他一些。我已经分别尝试了下面的每个 jQuery 调用，但没有一个真正隐藏了我想要获取的元素。

$(function() {
  $("#\\:1").hide();
  $("#\:1").hide();
  $(":1").hide();
  $("\3A1").hide();
  $("\3a1").hide();
  $("\3A 1").hide();
  $("\3a 1").hide();
  $('[aria-labelledby="\\:1.label"]').hide();
  $('[aria-labelledby="\\:1.label"] *').hide();

  $(document.getElementById(":1")).hide();
  $(document.getElementById("\:1")).hide();
});

要么什么都没有发生，要么我收到上述调用的语法错误。

顺便说一句，Chrome 说 CSS 路径是 '#\3a 1'。

编辑 这有效：

$(function() {
  setTimeout(function() {
    $("#\\:1").hide();
  }, 1000);
});

我想问题是 div 没有实际加载或其他什么。这仍然是一个问题，因为上述解决方案由于显而易见的原因存在缺陷。我会向 Google Group 询问这个 API（它是块状的），并且可能有一个回调来说明它何时加载或什么的。

编辑

完全是菜鸟错误——我正在寻找的内容实际上是插入到一个 init 函数中的。这就是为什么在我通常调用我的 jQuery 时它不存在的原因；我需要把它放在这里：

init = function() {

  Blockly.inject(document.getElementById('blocklyDiv'),
      {toolbox: document.getElementById('toolbox')});
  Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,
      document.getElementById('startBlocks'));
  $("#\\:1").hide();
}

Answer 1

:1 在 HTML5 中是完全有效的 id 属性：

id 属性指定其元素的unique identifier (ID)。

该值在元素的所有IDs 中必须是唯一的 home subtree 并且必须至少包含一个字符。价值 不得包含任何space characters。

但是，它可能需要转义。

CSS - CSS ID 选择器

在 CSS 中，要通过 ID 获取元素，请使用 ID selector：

文档语言的 ID 属性允许作者分配一个 文档树中一个元素实例的标识符。 CSS ID 选择器根据其标识符匹配元素实例。一个 CSS ID 选择器包含一个“#”，紧随其后的是 ID 值，其中 必须是标识符。

但是，:1 不是有效标识符：

在 CSS 中，identifiers（包括元素名称、类和 ID） selectors) 只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_);它们不能以数字、两个连字符或后面的连字符开头 一个数字。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（参见下一项）。例如， 标识符“B&W？”可以写成“B\&W\?”或“B\26 W\3F”。

因此，您不能使用选择器#:1，但可以将其转义为#\:1。

#\:1 {
    /* CSS styles */
}

JavaScript - CSS ID 选择器

在 JavaScript 中，您可以使用 document.querySelector 来获取与 CSS 选择器匹配的（第一个）元素。这同样适用于 jQuery。

您可以使用CSS.escape [警告-实验技术] 对字符串进行转义，使其成为有效的 CSS 标识符：

document.querySelector("#" + CSS.escape(":1"));

或者，您可以直接使用#\:1。但是，请注意，在 JavaScript 字符串文字中，字符 \ 会转义字符，因此 "#\:1" 变为 "#:1"。因此，你必须用另一个\ 转义\：

document.querySelector("#\\:1");

请注意，即使您使用 CSS.escape，如果 ID 包含 \ 或引号，您也必须在字符串文字中对其进行转义。

JavaScript - ID

但 JavaScript 也有 document.getElementById，比 CSS 选择器更快、更简单。

它直接通过 ID 获取元素，而不是 CSS 转义版本：

document.getElementById(":1");

请注意，如果 ID 包含 \ 或引号，则必须在字符串文字中转义它们。

Answer 2

引用自official documentation for HTML4：

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 (" _")、冒号 (":") 和句点 (".")。

以: 开头的 ID 无效。一些浏览器可能可以使用它，但你不应该指望它。您的 ID 仅以字母开头。

在HTML5 this string is allowed 中，由于您将文档指定为 HTML5，这似乎不是问题。

我还是把答案留在这里，也许它可以帮助有类似问题的人。