在前端开发过程中，我们经常会遇到各种错误提示。其中，Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: [duplicate] 这个错误是 jQuery 中常见的一个，它表示选择器中使用了不支持的伪类 :duplicate。
什么是伪类？
伪类（pseudo-class）是 CSS 选择器中的一种特殊语法，用于匹配 HTML 元素的某些状态或属性。例如，:hover 伪类可以匹配鼠标悬停在元素上时的样式。jQuery 也基于 CSS 选择器语法实现了自己的选择器引擎。
为什么会出现这个错误？
在 jQuery 中，有些伪类是它自己定义的，而有些则是借鉴了 CSS 选择器规范中的伪类。但并不是所有的 CSS 伪类都被 jQuery 支持。在使用不支持的伪类时，就会出现 Uncaught Error: Syntax error, unrecognized expression 错误。
对于 :duplicate 伪类，它并不属于 CSS 选择器规范，因此 jQuery 不支持这个伪类。如果你在代码中使用了 :duplicate，就会触发这个错误。
如何解决这个错误？
要解决 Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: [duplicate] 错误，有几种方法：
方法一：改用 jQuery 提供的伪类
jQuery 为我们提供了很多常用的伪类，如 :first、:last、:even、:odd 等等。如果你需要使用伪类来选择元素，尽量使用这些已经被 jQuery 支持的伪类，而不是自己定义的。
方法二：避免使用伪类
有时候，我们可能并不需要使用伪类来选择元素。比如，如果你想选择某个表单中的所有 input 元素，可以直接使用 $('form input') 这样的选择器，而不需要用到伪类。
方法三：自定义伪类
如果你确实需要使用一个自定义的伪类，可以通过编写插件或扩展 jQuery 选择器引擎的方式来实现。不过这需要一定的开发能力和时间，因此不建议初学者采用这种方式。
示例代码
下面是一个示例代码，它会触发 Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: [duplicate] 错误：
-----------------------------------------
要解决这个错误，可以将代码改为：
-------------------------------------
这样就可以选择第一个 div 元素，并添加高亮样式了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30370