在 querySelectorAll 的选择器中使用 TailwindCSS 类时如何修复“不是有效的选择器”错误？

Question

我正在尝试使用 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

我不确定为什么这个 CSS 选择器无效。有人可以解释它有什么问题以及我如何修复它以使我的 querySelectorAll() 在 DOM 上工作吗？

---

编辑： 我发现

:

是 CSS 选择器中的无效字符。仅使用

\

转义它也不起作用。必须使用

\\

转义无效字符，以便在

.querySelectorAll()

:

中使用 TailwindCSS 类名

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';

这似乎有效！

Answer 1

TailwindCSS 类名使用在 CSS 选择器中无效的字符。虽然这简化了开发，但如果处理不当会导致

"not a valid selector"

错误。

当尝试将

querySelectorAll()

与 CSS 选择器（包括 TailwindCSS 类）一起使用时，请确保通过在每个字符前面加上

:

来转义

/

、\\ 和

其他无效字符

。