供应商前缀伪选择器使Safari中的元素.matches（）Web API崩溃

我正在将一个实用程序构建到样式指南生成器中，该生成器自动收集每个元素的CSS，并在输出中与元素相邻的位置显示它。我用来收集和解析CSS的脚本基于并使用

在大多数情况下，代码都能正常工作，但如果存在特定于“供应商前缀”的伪元素选择器（如中的

：-webkit内部旋转按钮），Safari在嵌套最多的
if
语句（即
if（a.matches（rules[r].selectorText））{
）处抛出错误：

SyntaxError（DOM异常12）：字符串与预期模式不匹配

我试着在SO上搜索这个错误，我发现了，但我认为答案与我的问题无关

我有一个正则表达式解决方案，它将删除有问题的规则，这样函数至少可以运行，但正如您所看到的，该规则中的属性（
{background color:black；}
）在输出中被完全忽略，即使它们被应用于渲染元素

我可以修改我的正则表达式来解析字符串并切掉有问题的选择器，同时保留可解析的规则，但总的来说，这种非常具体的黑客行为让我觉得不雅，我担心，如果我的团队最终添加了依赖于这些类型的供应商前缀伪选择器的规则，这可能会导致问题

关于如何更精确地处理（或解决）这个问题，有什么想法吗

工作片段

window.css=函数（a）{
var sheets=document.styleSheets，o=[]；
a、 matches=a.matches | | a.webkitMatchesSelector | | a.mozMatchesSelector | | a.msMatchesSelector | a.oMatchesSelector；
用于（表中的var i）{
var规则=工作表[i]。规则| |工作表[i]。cssRules；
for（规则中的var r）{
如果（a.matches（规则[r].selectorText））{
o、 push（规则[r].cssText）；
}
}
}
返回o；
}
$（文档）.ready（函数（）{
$（'button'）。在（'click'，function（）上{
$（'#styles'）.text（css（$（$（'input'）.val（））[0]）；
});
})；
div*{左边框：2px纯黑色；边距：1em 0；填充：.5em；}
{文本装饰：无；显示：块；光标：指针；}
#红色{color:red；}

获取样式
#红锚
错误消息并不意味着什么-Safari抛出了一个语法错误，这在所有浏览器中都意味着相同的事情：给定的选择器无效。令人惊讶的是，Safari认为所有带有webkit前缀的伪元素在选择器API中无效，尽管在CSS中支持它们。I认为您唯一的选择是删除有问题的规则，或者用一个空的catch将代码包装在try块中。