从DOM复制的CSS选择器在document.querySelector中报错的解决方法

问题原因 #

你复制的选择器里的div.product.\31部分存在解析问题：\31是CSS中对数字开头类名的转义写法，但JavaScript的querySelector()对这种转义格式的解析规则和CSS不一致，导致选择器失效。

修复方法 #

方法1：修正数字类名的转义格式 #

在JS中，数字开头的类名需要用双反斜杠\\转义，把原选择器里的\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')

方法2：简化选择器（更推荐） #

浏览器自动生成的选择器过于冗长，且依赖DOM层级结构，页面稍有变动就会失效。可以简化为更稳定的选择器：

// 直接定位第一个商品元素下的目标div
document.querySelector('.collection__productsBottomWrapper div.product:first-of-type > div > div')

方法3：用属性选择器匹配类名 #

如果元素同时拥有product和1两个类，也可以用属性选择器精准匹配：

document.querySelector('div[class~="product"][class~="1"] > div > div')

额外建议 #

实际开发中尽量避免使用浏览器自动生成的冗余选择器，优先用语义化类名、ID或简洁的组合选择器，减少对nth-child这类易变结构的依赖，提升选择器的稳定性。

内容的提问来源于stack exchange，提问作者Moro Owusu Afriyie