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中文網其他相關文章！