为什么是“不”。id"；CSS/jQuery中的选择器不好，但它可以在HTML锚中工作吗？

我正在使用JSDoc。它生成的ID的周期如中所示

<a id=".someMethodName"></a>

放
一些
文本
在这里
所以
这个
页
是
长的
足够地
那个
什么时候
我们
点击
这个
锚
这个
浏览器
有
作为
A.
地方
到
纸卷
那个
是
关
屏幕
否则
我们会
有
不
方式
到
看见
如果
信息技术
工作
或
不
我们应该滚动到这里
我们成功了吗

在查询元素之前，必须使用

\\

转义

。 替换

到

另请注意，技术上，对于所需的ID值格式规定如下：

ID和名称标记必须以字母（[a-Za-z]）开头，后面可以是任意数量的字母、数字（[0-9]）、连字符（“-”）、下划线（“）、冒号（：”）和句点（“.”）

因此，

[A-Za-z]

是无效的。

的是有效的id属性：

对于ID的形式没有其他限制；在里面 特别是，ID可以仅由数字组成，以数字开头，以数字开头 带下划线，仅由标点符号等组成

因为它不是有效的，所以要将它与

querySelector（）

或

$（）

一起使用，您应该像这样转义它：

#\\.someMethodName

:

匹配不遵循CSS语法的ID或选择器（通过使用 例如，冒号或空格不适当），必须避开 带反斜杠的字符。因为反斜杠是转义字符 在JavaScript中，如果要输入文本字符串，必须转义 两次（一次用于JavaScript字符串，另一次用于 查询选择器）：

请注意，对于HTML5 id命名约定，它不是有效的id属性

---

在HTML5中，您可以在几乎没有语法限制的情况下：

对于身份证的形式没有其他限制；特别是，ID可以仅由数字组成，以数字开头，以下划线开头，仅由标点符号组成，等等

所需的选择器函数是什么

---

但是，当使用JavsScript选择器（如）时，注意它如何计算参数的语法是很重要的

返回文档中与指定选择器组匹配的第一个元素（使用文档标记中的第一个元素对文档节点进行深度优先的预先顺序遍历，并按子节点的数量顺序遍历顺序节点）

元素=document.querySelector（选择器）

• element

  是一个元素对象

• 选择器

  是一个字符串，其中包含一个或多个由逗号分隔的CSS选择器

当您混淆选择器功能时

---

在这里，我们看到它正在尝试解析。基本上，该函数将以

开头的任何字符串解释为类，将以

开头的任何字符串解释为id，因此当您尝试向其传递如下字符串时：

#.someMethodName

它认为您试图将id和类全部解析为单个参数，并抛出一个称之为语法错误的错误

总之

---

总之，虽然您的ID值在技术上是有效的，但使用

和

#

将混淆那些JavaScript选择器函数，如

$（选择器）

和

document.querySelector（选择器）

等

要解决此问题，您需要让函数知道您正试图通过转义非标识符字符将

或

#

用作字符而不是标识符：

---

HTML5允许在ID属性值中有一个句点，浏览器几十年来一直在处理这个问题，没有任何问题（这就是为什么HTML4中的限制——它本身不是由HTML定义的，而是由它所基于的SGML定义的——在HTML5中被放宽了，现在不再受SGML的传统包袱限制）。所以问题不在于属性值

由定义的片段标识符的语法为：

其中，

pchar

的字符集包括句点。因此，

.someMethodName

是一个有效的片段标识符，这就是为什么

因此，该句点保留给类选择器（类似地，它由一个句点和一个标识组成）
简言之，解析器希望在
#
之后有一个CSS标识，但找不到，因为直接跟在它后面的
使选择器无效。这是令人惊讶的，因为ID选择器的表示法实际上是基于片段标识符的URI表示法——这一点很明显，它们都以
#
符号开头，并且它们都用于引用文档中由该标识符唯一标识的元素。期望在URI片段中工作的任何东西也能在ID选择器中工作并不是不合理的——在大多数情况下，这是正确的。但因为CSS有自己的语法，它不一定和URI语法相关（因为它们是两个完全不相关的标准1），所以会出现像这样的边缘情况

由于句点是片段标识符的一部分，您需要用反斜杠将其转义，以便在ID选择器中使用它：

\.someMethodName

不要忘记，您需要在JavaScript字符串中转义反斜杠本身（例如，用于
document.querySelector（）
和jQuery）：


1几年前，围绕一项使用CSS选择器作为片段标识符的提案成立了一个委员会（我是该委员会的成员），正如您所想象的，该委员会以一种有趣的方式将这两种技术结合起来。然而，这种技术从未成功过，唯一已知的实现是一些浏览器扩展，这些扩展甚至可能没有得到维护

为什么浏览器本身接受这个锚，而jQuery和querySelector不接受

因为散列不是CSS选择器，所以它是一个
#
fo
document.querySelector('#.someMethodName');

document.querySelector('#\\.someMethodName');

#\\.someMethodName

#\\.someMethodName

fragment    = *( pchar / "/" / "?" )

document.querySelector('#\\.someMethodName')
$('#\\.someMethodName')