不能 select div 使用 id=":1"

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 调用，并且 none 实际上隐藏了我试图获取的元素。

$(function() {
  $("#\:1").hide();
  $("#\:1").hide();
  $(":1").hide();
  $("A1").hide();
  $("a1").hide();
  $("A 1").hide();
  $("a 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 小组询问这个 API（它是块状的），也许有一个关于何时加载或其他东西的回调。

编辑

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

init = function() {

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

Answer 1

引自official documentation for HTML4：

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

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

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

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

Answer 2

:1 是 HTML5:

中完全有效的 id 属性

The id attribute specifies its element's unique identifier (ID).

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

然而，它可能需要一些转义。

CSS - CSS ID 选择器

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

The ID attribute of a document language allows authors to assign an identifier to one element instance in the document tree. CSS ID selectors match an element instance based on its identifier. A CSS ID selector contains a "#" immediately followed by the ID value, which must be an identifier.

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

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, 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 WF".

因此，您不能使用选择器 #: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 包含 \ 或引号，您必须在字符串文字中对它们进行转义。

不能 select div 使用 id=":1"

Can't select div with id=":1"

html

css

jquery

css-selectors

jquery-selectors