Chrome扩展开发：含[]的CSS类选择器无效问题求助

问题根源 #

类名中的[13px]属于CSS选择器的特殊语法（属性选择器），直接使用会触发语法错误，必须对[和]进行转义。在JavaScript字符串中，反斜杠本身需要二次转义，所以要用\\[和\\]代替原类名中的[和]。

正确实现代码 #

// 精确匹配目标类名（转义特殊字符）
const targetDivs = document.querySelectorAll('.w-full.text-left.text-\\[13px\\].font-semibold.text-white');

// 遍历所有目标div，在文本末尾添加"|"
targetDivs.forEach(div => {
  div.textContent = `${div.textContent.trim()}|`;
});

其他可选方案（按需使用） #

如果不需要严格匹配类名顺序，也可以用属性选择器模糊匹配：

// 匹配class属性中包含"text-[13px]"的元素
const targetDivs = document.querySelectorAll('[class*="text-[13px]"]');

注意：这种方式可能匹配到其他包含该类的元素，需根据页面结构判断是否适用。

常见错误排查 #

• 转义不彻底：直接写\[会被JavaScript解析为单个[，必须写\\[才能传递给CSS选择器作为转义字符。
• 类名拼接错误：多个类名之间要用.连接，不能留空格（留空格代表后代选择器）。

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