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

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

考虑到遍历 CSS 规则的局限性，本文探讨使用 jQuery 选择器来定位由伪元素规则引起的具有特定效果的元素。

例如，考虑一个元素：

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

可以有选择地修改：

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

要选择具有默认背景位置的伪元素，以下选择器语法不起作用：

$(".commentarea .author:before")

类似地，尝试使用 .siblings() 查找具有特定背景图像的元素返回空结果。

问题的症结在于伪元素的本质。它们没有独立的选择器，而是修改周围的元素。换句话说，:before 和 :after 不选择；

例如，在 HTML:

<span>

和 CSS:

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

文本“|Inserted using :before|”插入到内部 span 元素之前，因为类 b 是类 a 的后代。这说明伪元素没有自己的选择器，但会影响其父元素。

因此，不可能使用标准 jQuery 选择器语法直接选择伪元素。一种可能的解决方案是利用 jQuery 插件，例如 jQueryRule (http://flesler.blogspot.com/2007/11/jqueryrule.html) 来提取原始 CSS 规则。

以上是如何使用 jQuery 访问 CSS 伪元素的样式属性？的详细内容。更多信息请关注PHP中文网其他相关文章！