如何使用 jQuery 访问伪元素的样式属性？

Question

对于上下文，这是之前的问题的后续问题。我不想深入研究 cssRules，而是希望将逻辑建立在搜索这些规则的效果的 jQuery 选择器上。

给定的默认属性

.commentarea .author:before {
    background-image: url(http://...);
    background-position: -9999px -9999px;
    /* ... */
}

是有选择地修改的，例如

.author[href$="gbacon"]:before /* ... */ {
  content: "";
  background-position: 0 -140px
}

如何选择各自背景位置具有默认值的伪元素？复制选择器就像

GM_log("size = " + $(".commentarea .author:before").size());

没有匹配任何内容。尝试 .siblings()

$(".commentarea .author")
  .map(function(i) {
         GM_log($(this)
                  .siblings()
                  .map(function (i) { return $(this).css("background-image") })
                  .get()
                  .join(", "))
       });

仅产生 none值。

如需了解完整详情，请参阅实时页面。这可能吗？

Answer 1

您不能像这样使用 :before 和 :after 伪元素。它们的目的是在您指定的选择器之前和之后（分别）插入内容。

示例用法：

HTML：

<span class='a'>
    Outer
    <span class='b'>
        Inner
    </span>
</span>

CSS：

.a .b:before {
    content: "|Inserted using :before|";
}

.a {
    color: blue;
}

.b {
    color: red;
}

结果：

http://jsfiddle .net/mzcp6/

发生的情况是，文本 |Inserted using :before| 被插入到内部跨度之前（嗯，实际上是前置），因为它是类 b 以及类a 的元素的后代。基本上， :before 和 :after 不选择；他们修改。

示例：

这不会按预期工作：

HTML：

<span class='a'>
    <p>More text</p>
    <span class='b'>
        <p>More text</p>
        Inner
    </span>
</span>

CSS：

.a .b:before {
    text-size: 100px;
}

没有任何反应：

http:// jsfiddle.net/bQ2ty/

编辑：

:before 不是有效的 jQuery 选择器：http://api.jquery.com/category/selectors/

我认为您需要使用 :before 或尝试之外的其他内容使用 jQuery 插件提取原始规则： http://flesler.blogspot.com/2007 /11/jqueryrule.html