如何选择类名中带冒号 : 的 HTML 元素?

CSS 类名是字符串，里面可以包含冒号（:），比如：

如果你使用 Tailwind CSS 框架，在响应式布局相关类名下，会看到不少这种带冒号的类名前缀，比如 sm:, md: 等。

如果你尝试使用 document.querySelectorAll('.sm:pb-10') 检索这些元素，会发现浏览器报错，原因在于这种 ".sm:pb-10" 语法不是有效的选择器。

'.sm:pb-10' is not a valid selector

你有两种方法解决这个问题。

第一种是使用反斜线对冒号进行转译。由于反斜线自身也是特殊字符，所以它也需要被转译，因此需要使用两个反斜线对冒号转译。

document.querySelectorAll('.sm\\:pb-10')

第二种方法是使用 [class*="sm:pb-10"] 语法，它的含义是选择所有 class 属性中包含 "sm:pb-10" 字符串的元素。

document.querySelectorAll('[class*="sm:pb-10"]')

好了，小小 JS 技巧希望能帮到你。