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

Question

这是我的问题:我正在编写一个 WordPress 插件，帮助崭露头 Angular 的 CSS 作者了解 css 如何实时应用于他们的主题。它有许多漂亮的功能，除了一个在我看来非常重要的功能。

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

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

1. 使用 jQuery，并运行每个选择器(在样式表中)以查看它返回什么。我对此并不着迷，因为这似乎是一个巨大的性能拖累(可能数千)的选择器针对完整的 DOM。最重要的是，然后我必须比较 jQuery 对象以查看它们是否指向同一事物 - 根据我所阅读的关于比较对象的内容，我不确定这将是一个步行公园。

2. 编写我自己的简单比较函数，并将完整的选择器路径与 css 选择器进行比较。我对此非常满意，直到我开始考虑各种高级选择器 - : > 等

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

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

Answer 1

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