如何用querySelector选择带Tailwind伪状态类名的元素？

当你使用Tailwind的checked:bg-red-500这类带伪状态前缀的类名时，直接用.checked:bg-red-500或.checked\:bg-red-500无法选中元素的核心原因是：CSS选择器里的冒号是伪类的特殊标识，浏览器会把它解析为伪类语法，而非类名的一部分。

正确的选择方法有两种：

• 双重转义冒号：在JavaScript字符串中，需要用双重反斜杠转义类名里的冒号，让浏览器识别它是类名的组成部分：

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

• 使用属性选择器：通过匹配class属性的内容选中元素，这种方法无需处理转义问题：

  // 匹配class属性值完全等于该类名的元素
  document.querySelector('[class="checked:bg-red-500"]')
  
  // 匹配class属性值包含该类名的元素（元素有多个类时适用）
  document.querySelector('[class*="checked:bg-red-500"]')
  

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