jQuery は :before や :after のような CSS 疑似要素を選択できますか?

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 セレクターではないことに注意することが重要です。これらは特定の目的を果たします。

• :before 選択した要素の前にコンテンツを挿入します
• :after 選択した要素の後にコンテンツを挿入します

例使用法

次の 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 を使用してテキストが内部スパンの先頭に追加されます。

Alternatives

から: before は有効な jQuery セレクターではないため、代替アプローチが必要です。 1 つのオプションは、jQueryRule などの外部 jQuery プラグインを使用して元のルールを抽出することです。

jQuery を使用して疑似要素のスタイル プロパティにアクセスするのは難しい場合があることに注意してください。ニーズをより効果的に満たす代替アプローチがあるかどうかを慎重に検討してください。

以上がjQuery は :before や :after のような CSS 疑似要素を選択できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。