matches() 在旧浏览器需兼容前缀方法，现代浏览器原生支持；应按 matches→matchesSelector→webkit/moz/ms/oMatchesSelector 优先级挂载；伪类支持有限，复杂选择器需降级 querySelectorAll 模拟。
matches() 在旧版浏览器中不能直接用，得靠带前缀的替代方法，比如 webkitMatchesSelector、msMatchesSelector 这些。现代浏览器基本都原生支持 matches()，但 IE9–IE11、老版 Safari 和 Chrome 需要手动兼容。
识别并挂载正确的 matches 方法
浏览器对这个方法的实现名不统一，得按优先级依次检测，把最可能存在的补上：
- 先查
element.matches（标准名，Chrome 34+、Firefox 32+、Safari 7.1+、Edge 13+） - 没找到就试
element.matchesSelector（早期草案名） - 再 fallback 到各厂商前缀：
webkitMatchesSelector（WebKit/Safari/旧 Chrome）、mozMatchesSelector（Firefox）、msMatchesSelector（IE9–11、Edge Legacy）、oMatchesSelector（老 Opera）
推荐写法（轻量、无依赖）：
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.matchesSelector ||
Element.prototype.webkitMatchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector;
}
注意前缀方法的兼容边界
不是所有前缀版本都能力一致，尤其在伪类支持上容易踩坑：
-
webkitMatchesSelector（如 Safari ≤6.1、iOS ≤7）不支持:nth-child()、:not()等复杂伪类，简单类名或属性选择器更稳 -
msMatchesSelector（IE9–11）支持基础伪类（如:first-of-type），但不支持运行时状态伪类（:hover、:focus） - 避免在关键逻辑里依赖
:has()或:is()——这些是较新的 CSS 选择器，旧前缀方法基本不识别，会直接抛SyntaxError
兜底方案：用 querySelectorAll 模拟（仅限必要场景）
如果连前缀方法都不可用（比如极老 IE8），可退到 DOM 查询方式，但性能略低，只建议做降级：
- 调用
document.querySelectorAll(selector)获取全部匹配元素 - 遍历结果，用
===严格比对是否包含当前元素 - 注意：该方式无法处理动态插入的元素，也不支持部分伪类（如
:target）
if (!Element.prototype.matches) {
Element.prototype.matches = function(selector) {
const matches = (this.ownerDocument || document).querySelectorAll(selector);
for (let i = 0; i < matches.length; i++) {
if (matches[i] === this) return true;
}
return false;
};
}
实际使用时的小提醒
写选择器字符串本身也要注意兼容性：
- 避免空格开头或结尾，旧前缀方法可能解析失败
- ID 和类名别用中文或特殊符号，部分旧引擎对 UTF-8 解析不稳定
- 建议加
try...catch包裹调用，防止非法选择器导致脚本中断
