如何在Tailwind伪类名上使用querySelector查找元素

Question

鉴于我有单选按钮样式与顺风类

<input type="radio" class="bg-red-500" checked="checked"/>

我可以使用 JavaScript 查询选择器找到该元素：

document.querySelector(".bg-red-500")

没什么大不了👍它有效

但是我如何找到一个带有Tailwind的伪元素类名称样式的emement？

<input type="radio" class="checked:bg-red-500" checked="checked"/>

以下不起作用🤔：

document.querySelector(".checked:bg-red-500")
document.querySelector(".checked\:bg-red-500")

Answer 1

因此，在 Tailwind 中，像

checked:bg-red-500

这样的伪类变体会根据状态有条件地应用（例如，当选中复选框时），但它们不会作为单独的类直接反映在 DOM 中。这就是为什么您不能使用以下命令来选择它们：

document.querySelector(".checked:bg-red-500").

但是您仍然可以使用普通 JavaScript 根据元素的状态来查询元素。

因此，要找到一个带有checked:bg-red-500伪类样式的单选按钮（例如，当它被选中时），您可以在查询选择器中使用属性选择器或伪类，例如：

document.querySelector('input[type="radio"].bg-red-500:checked')