Javascript 查找伪元素答案

【问题标题】：Javascript find pseudo elementsJavascript 查找伪元素
【发布时间】：2011-08-01 16:54:10
【问题描述】：

所以我一直在研究a CSS selector engine，我想支持伪元素（::before、::after、::selection、::first-line 等）。我注意到 Slick、Sizzle 和其他一些流行的引擎似乎都支持它们，但是在查看它们的代码时，我没有发现它的代码（现在承认，我看起来并不那么努力）。有谁知道他们是怎么做到的，或者我可以通过什么方式做到这一点？

【问题讨论】：

在 Sizzle 源中查找“filters”、“setFilters”等，您会看到它们是如何设置的。
@Pointy：这似乎是针对伪类，而不是伪元素。
好的，那么是什么让您认为 Sizzle 支持这些？（你甚至会通过 Sizzle 对它们做什么，因为这完全是为了寻找东西而不是直接影响 DOM？？）
@Pointy：SlickSpeed。当使用一些伪元素选择器运行时，似乎发现它们很好。当然，您对 Sizzle 所做的一切就是找到它们，但关键是一旦找到它们，您就可以对其进行操作。

标签： javascript css css-selectors pseudo-element sizzle

【解决方案1】：

这是一个使用 jQuery 在 Webkit 中找到它们的简单方法，可以相当容易地转换为标准 JS：

$('*').filter(function(){return getComputedStyle(this, ':before').length != 0});

对于基于 Gecko 的浏览器，您需要一些不同的东西（尚未在 IE 中测试）。希望这会有所帮助

【讨论】：

解释为什么“你需要一些不同的东西”getComputedStyle(this, ':before').length 在 Firefox 6 中总是非零（它似乎喜欢值 185，我还没有试图找出原因）。
Gecko 和 Webkit 浏览器为 getComputedStyle 输出不同的结果 - Gecko 输出默认浏览器样式，webkit 仅在元素已设置样式时输出 - 如果它在 CSS 中被引用。您需要创建一个没有样式的空白元素，然后将该样式对象与 getComputedStyle(this, ':before') 进行比较，而不是测试长度 - 或者可能测试伪元素的“内容”属性。
我喜欢这个。毕竟我可能不会最终在我的选择器引擎中实现这些，但如果我决定这样做，这看起来是一种不错的方式（尽管存在一些跨浏览器问题）。
这是解决我遇到的问题的绝妙方法。如果您需要将 CSS 应用于基于随机类的伪元素（如 .focus:before）并且其中的元素具有 Id，这可能是您可以达到的唯一解决方案。谢谢！