jQuery 可以选择 CSS 伪元素，例如 :before 和 :after 吗？

通过 jQuery 访问伪元素

在处理上一个问题时，我们探索了根据 CSS 规则的效果选择伪元素的挑战。让我们探索使用 jQuery 选择器的替代方法。

背景属性

考虑以下默认 CSS 属性：

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

然后修改这些属性有选择地：

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

jQuery选择器

要选择具有默认背景位置的伪元素，像这样的基本选择器将不起作用：

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

其他尝试，例如使用 .siblings() 也会失败产生期望的结果。

伪元素的局限性选择器

需要注意的是：before 和 :after 不是有效的 jQuery 选择器。它们有特定的用途：

：在所选元素之前插入内容
• ：在所选元素之后插入内容

示例用法

以下 HTML 和 CSS 演示了 :before 和 :after 的用法work:

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

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

.a {
    color: blue;
}

.b {
    color: red;
}

在此示例中，使用 :before 将文本添加到内部范围之前。

替代方案

自 : before 不是有效的 jQuery 选择器，需要替代方法。一种选择是使用 jQueryRule 等外部 jQuery 插件来提取原始规则。

请注意，使用 jQuery 访问伪元素的样式属性可能具有挑战性。仔细考虑是否有其他方法可以更有效地满足您的需求。

以上是jQuery 可以选择 CSS 伪元素，例如 :before 和 :after 吗？的详细内容。更多信息请关注PHP中文网其他相关文章！