Question

在浏览官方文档时，我无法理解为了匹配第一个div，他们如何编写四个反斜杠（\），在我看来应该有两个反斜杠。我无法找到有效的逻辑理由

 <div id="foo\bar"></div>
 <div id="foo:bar"></div>
 document.querySelector('#foo\\\\bar');  // It matches the first div

Answer 1

这是由于浏览器在id属性中转义反斜杠。所以它将成为

<div id="foo\\bar"></div>

因此，为了选择我们需要提供\\\\元素来选择元素。

var elements = document.querySelector('#foo\\\\bar');
console.log(elements);
var elements = document.querySelector('#foo\\bar');
console.log(elements);

<div id="foo\bar"></div>
<div id="foo:bar"></div>

根据评论更新您可以在以下链接中阅读有关此内容的更多信息： -

https://mathiasbynens.be/notes/css-escapes

https://www.w3.org/TR/CSS21/syndata.html#characters

Answer 2

你有两个双反斜杠。如你所知，反击是一种“逃避”的角色。

所以你的选择器字符串变为：

#foo\\bar <--- to have this string in a variable, you need to use '#foo\\\\bar'

现在，querySelector将使用（在字符串中）留下的双反斜杠（再次作为转义字符）。

您可以查看有关如何撰写选择器的更多详细信息here。

Answer 3

它的编码规则将diffrence与一些特殊字符放在一起。 '\b'是charactere的组合，意思是退格，所以如果你不想表达它，你必须写'\\b'，你需要编码'\'的第二步你的字符串为了覆盖这种情况，你必须写'\\'。因此，您的输出必须为"foo\\\\bar"

如何在id属性中选择具有反斜杠的元素

3 个答案: