如何使用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;
}

结果：

发生的事情是，文本|Inserted using :before|被插入到内部跨度之前（实际上是在内部跨度之前），因为它是class
b，是class 元素的后代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;
}