从 dom 获取时 CSS 选择器抛出错误

Question

div#PageContainer > div.container-AD > div:nth-child(4) > div > div.collection__content > div.collection__products.td-collection__products.collection__products-- Three.td-sticky-filter__container > div.collection__productsBottom.js -collection__productsBottom > div.collection__productsBottomWrapper > div.product. > div > div

当我右键单击该元素时，我从谷歌浏览器获得了此选择器，选择复制并从该网站复制选择器[https://bruntworkwear.com/collections/boots1，这是页面上的第一项。但是当我使用 document.querySelector() 时，我收到一条错误消息，指出它不是有效的选择器。我该如何解决这个问题？

document.querySelector('div#PageContainer > div.container-AD > div:nth-child(4) > div > div.collection__content > div.collection__products.td-collection__products.collection__products--three.td-sticky-filter__container > div.collection__productsBottom.js-collection__productsBottom > div.collection__productsBottomWrapper > div.product.\31 > div > div')

VM24989:1 未捕获的 DOMException：无法在“文档”上执行“querySelector”：“div#PageContainer > div.container-AD > div:nth-child(4) > div > div.collection__content > div.collection__products.td- collection__products.collection__products-- Three.td-sticky-filter__container > div.collection__productsBottom.js-collection__productsBottom > div.collection__productsBottomWrapper > div.product. > div > div' 不是有效的选择器。 于：1:10

Answer 1

\31

是字符

1

的 CSS 转义

但是 Javascript 字符串也有转义，所以如果你只在字符串中执行

\31

你将会丢失它，这是因为

\31

将被视为八进制字符，IOW：十六进制值 19，当然不是一样。

解决方案就在你的Javascript字符串中，只需记住转义转义即可，..

\31

->

\\31

..

所以你的完整字符串应该是 ->

document.querySelector('div#PageContainer > div.container-AD > div:nth-child(4) > div > div.collection__content > div.collection__products.td-collection__products.collection__products--three.td-sticky-filter__container > div.collection__productsBottom.js-collection__productsBottom > div.collection__productsBottomWrapper > div.product.\\31 > div > div')