我可以使用像sizzle这样的选择器引擎来比较css选择器吗？

Question

这是我的问题：我正在编写一个WordPress插件，帮助萌芽的CSS作者看到css如何实时应用于他们的主题。它有一大堆漂亮的功能，除了一个，这在我看来非常重要。

我想让他们单击一个元素，查看该元素的完整选择器路径（该部分已完成），然后向他们展示样式表中的哪些样式适用于它。

我有元素的完整选择器路径（例如html body div #page div＃post-18.post h2.posttitle），我将他们的样式表解析为单独的选择器 - 但我无法弄清楚任何比较两者的方法。我有过一些想法：

1. 使用jQuery，并运行每个选择器（在样式表中）以查看它返回的内容。我并不疯狂，因为它似乎是一个巨大的性能阻力检查（可能成千上万的选择器反对完整的DOM。最重要的是，我已经比较了jQuery对象，看看它们是否指向同一个东西 - 并且基于我所读到的关于比较对象的内容，我不确定这将是一个散步公园。

2. 编写我自己的简单比较函数，并将完整的选择器路径与css选择器进行比较。我在这方面已经很畅销，直到我开始考虑各种高级选择器 - ： ＆GT;等。

3. 使用sizzle（或类似的），或以某种方式使用jQuery的sizzle实现来比较选择器。他们正在针对DOM运行这些选择器，所以他们肯定有能力只比较选择器字符串？不知？

我被困住了。非常感谢任何帮助。

Answer 1

检查复杂结构（如CSS）中的相等性是非常困难的（例如，您无法通过测试相同的结果集来确定这一点，因为在其他情况下它们的行为可能完全不同）。如果它们在JavaScript中可用，您可以使用特定于浏览器的API来解决这个问题（例如，Firebug会显示影响所选元素的样式表）。除此之外，你的第一种方法是唯一可能的AFAIK。