Javascript document.querySelector中允许哪些字符？

目前，我正在编写一个webchat，在这个webchat中，用户可以使用URI-GET参数打开一个新房间。php部分创建html并将其发送到浏览器。 但是如果用户在URI中键入类似于

/？Mychat%20%231

的内容，我的php将发送一个名为

Mychat#1

的聊天。 这仍然是正确的，但当我尝试刷新聊天时（每秒钟），我总是得到

SyntaxError:“section.Mychat_35;1”不是有效的选择器 每次聊天都是这样的：

<section class="chat-container chat_name_#1"><!-- <- I try to get this node via the chat name -->
    <header>
        chat_name_#1
    </header>
    <div class="msg-container" style="">
        <section><!-- here the messages will be inserted --></section>
    </div>
    <footer>
        <div class="msg">
            <input name="msg" autocomplete="off" type="text">
        </div>
        <div class="btn">
            <button>senden</button>
        </div>
    </footer>
</section>

普通类名称中允许使用hashtag字符（如果它们不以它开头）

---

我的问题不是重复的

在我问它之前，我在谷歌上搜索并找到了它。

---

我读了它，但只解释了css选择器是允许的。不幸的是，在我的例子中，它没有帮助。

在类名中允许散列，但是。即使类名包含哈希，情况也是如此。因此，选择器被视为一个类选择器，后面是一个ID选择器。这里出现语法错误的直接原因是ID选择器由一个散列后跟一个标识组成，标识不能以数字开头（请参阅）

---

要在类选择器中使用哈希，您需要使用反斜杠对其进行转义，但是如果您可以控制生成这些类名的PHP，那么最好完全取消哈希，因为它只会带来更多的麻烦。请注意，散列还表示URL中的片段标识符，这就是为什么它在URL中被编码为

%23

（另请参见）。因此，这就是不在类名中使用哈希的两个原因，仅仅因为它在HTML5中是允许的。

哈希在类名中是允许的，但是。即使类名包含哈希，情况也是如此。因此，选择器被视为一个类选择器，后面是一个ID选择器。这里出现语法错误的直接原因是ID选择器由一个散列后跟一个标识组成，标识不能以数字开头（请参阅）

---

要在类选择器中使用哈希，您需要使用反斜杠对其进行转义，但是如果您可以控制生成这些类名的PHP，那么最好完全取消哈希，因为它只会带来更多的麻烦。请注意，散列还表示URL中的片段标识符，这就是为什么它在URL中被编码为

%23

（另请参见）。因此，这就是不在类名中使用散列的两个原因，仅仅因为它在HTML5中是允许的。

似乎类选择器中不能有未经消隐的

#

字符，即使它在

类

属性中是有效的。这是因为一个未切换的

#

会立即向

id

选择器发出信号

一个选项是使用属性选择器。例如

document.querySelector([
  `section[class="${CHAT[DATA].title}"]`,   // exact match, only one class
  `section[class^="${CHAT[DATA].title} "]`, // starts-with
  `section[class$=" ${CHAT[DATA].title}"]`, // ends-with
  `section[class*=" ${CHAT[DATA].title} "]` // contains among other classes
].join(','))

---

似乎类选择器中不能包含未转义的

字符，即使它在

类

属性中有效。这是因为一个未切换的

#

会立即向

id

选择器发出信号

一个选项是使用属性选择器。例如

document.querySelector([
  `section[class="${CHAT[DATA].title}"]`,   // exact match, only one class
  `section[class^="${CHAT[DATA].title} "]`, // starts-with
  `section[class$=" ${CHAT[DATA].title}"]`, // ends-with
  `section[class*=" ${CHAT[DATA].title} "]` // contains among other classes
].join(','))

---

@Karl Johan Sjögren：但这与id属性无关。类字段也一样，不能有#在其中。选择器的可能副本使用标记，以便可以解析值（请参阅）。如果这些标记出现在值中，则必须对其进行转义或引用。@Karl Johan Sjögren:HTML中的限制和CSS中的限制在设计时没有考虑到彼此。它们是完全不相关的。@Karl Johan Sjögren:但这与id属性无关。类字段也是如此，其中不能有#。选择器的可能副本使用标记，以便可以解析值（请参阅）。如果这些标记出现在值中，则必须对其进行转义或引用。@Karl Johan Sjögren:HTML中的限制和CSS中的限制在设计时没有考虑到彼此。它们完全无关。好的，谢谢。当它出现这么多问题时，我会用其他任何东西来代替它。。。可能有一个空格“…并且一个标识不能以数字开头”，这就是所谓的HTML4！如果“ident”表示“id”，那么4.1之后的HTML版本（有时称为HTML5，但仅根据WHATWG）允许id中几乎任何字符：“对于id的形式没有其他限制；特别是，id可以仅由数字组成，以数字开头，以下划线开头，仅由标点符号组成，等等。”我认为任何浏览器都不会强制执行“不能以数字开头”的规则@RobG：“ident”表示“identifier”。这是一个CSS标记化术语。与HTML id属性无关。是的，这就是为什么这些限制被取消了——它们从来没有被强制执行过。那么“ident”的含义应该被澄清。在回答的上下文中，我只能将其解释为“要匹配的ID值”，例如，给定

ID=“foo”

则要匹配的ID值为“foo”。也许我应该找到一个CSS选择器解析资源…@RobG：这真的需要一个好的规范问题。就我个人而言，我已经厌倦了在我对各种问题的回答中重复同样的事情，这些问题都归结为同一件事；）好的，谢谢。当它出现这么多问题时，我会用其他任何东西来代替它。。。可能有一个空格“…并且一个标识不能以数字开头”，这就是所谓的HTML4！如果“ident”表示“id”，那么4.1之后的HTML版本（有时称为HTML5，但仅根据WHATWG）允许id中几乎任何字符：“对于id的形式没有其他限制；特别是，id可以仅由数字组成，以数字开头，以下划线开头，仅由标点符号组成，等等。”我认为任何浏览器都不会强制执行“不能以数字开头”的规则@RobG：“ident”表示“identifier”。这是一个CSS标记化术语。与HTML id属性无关。是的，为什么会有限制