如何修复使用TailwindCSS类作为querySelectorAll选择器的无效选择器错误

我尝试用 querySelectorAll() 获取匹配指定 CSS 选择器的所有 DOM 元素，代码如下：

let selector = 'div.group.w-ful.text-gray-800.dark:text-gray-100.border-b.border-black/10.dark:border-gray-900/50.dark:bg-gray-800 > div.text-gray-400.flex.self-end.lg:self-center.justify-center.mt-2.gap-2.md:gap-3.lg:gap-1.lg:absolute.lg:top-0.lg:translate-x-full.lg:right-0.lg:mt-0.lg:pl-2.visible';
let containerArray = document.querySelectorAll(selector);

但在控制台运行时出现以下错误：

1562:1 Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div.group.w-ful.text-gray-800.dark:text-gray-100.border-b.border-black/10.dark:border-gray-900/50.dark:bg-gray-800 > div.text-gray-400.flex.self-end.lg:self-center.justify-center.mt-2.gap-2.md:gap-3.lg:gap-1.lg:absolute.lg:top-0.lg:translate-x-full.lg:right-0.lg:mt-0.lg:pl-2.visible' is not a valid selector.
    at <anonymous>:1:10

问题原因 #

选择器无效的核心原因是Tailwind CSS 类名中的特殊字符未正确转义：

• 类名里的冒号:会被 CSS 解析器误认为是伪类/伪元素的语法标记
• 斜杠/在 CSS 选择器中属于特殊字符，无法直接使用
• 在 JavaScript 字符串中，单个反斜杠\是转义符，无法直接传递给 CSS 解析器，必须用双反斜杠\\来表示实际要传递的转义字符

修复方法 #

将选择器中所有的: 替换为\\: ，所有的/替换为\\/，修改后的代码如下：

let selector = 'div.group.w-ful.text-gray-800.dark\\:text-gray-100.border-b.border-black\\/10.dark\\:border-gray-900\\/50.dark\\:bg-gray-800 > div.text-gray-400.flex.self-end.lg\\:self-center.justify-center.mt-2.gap-2.md\\:gap-3.lg\\:gap-1.lg\\:absolute.lg\\:top-0.lg\\:translate-x-full.lg\\:right-0.lg\\:mt-0.lg\\:pl-2.visible';
let containerArray = document.querySelectorAll(selector);

修改后即可正常运行，成功匹配目标 DOM 元素。

内容的提问来源于stack exchange，提问作者gradient_dissent