JQuery peut-il sélectionner des pseudo-éléments CSS comme :before et :after ?

Accès aux pseudo-éléments via jQuery

En travaillant sur une question précédente, nous avons exploré le défi de la sélection de pseudo-éléments en fonction des effets des règles CSS. Explorons une approche alternative utilisant les sélecteurs jQuery.

Propriétés d'arrière-plan

Considérez les propriétés CSS par défaut suivantes :

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

Ces propriétés sont ensuite modifiées de manière sélective :

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

jQuery Sélecteurs

Pour sélectionner des pseudo-éléments avec des positions d'arrière-plan par défaut, les sélecteurs de base comme celui-ci ne fonctionneront pas :

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

D'autres tentatives, telles que l'utilisation de .siblings(), échouent également pour produire les résultats souhaités.

Limitations du pseudo-élément Sélecteurs

Il est important de noter que :before et :after ne sont pas des sélecteurs jQuery valides. Ils servent un objectif précis :

• :avant insère le contenu avant l'élément sélectionné
• :après insère le contenu après l'élément sélectionné

Exemple Utilisation

Le code HTML et CSS suivant montre comment :avant et :après work :

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

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

.a {
    color: blue;
}

.b {
    color: red;
}

Dans cet exemple, le texte est ajouté au début de la travée intérieure en utilisant :before.

Alternatives

Depuis : before n'est pas un sélecteur jQuery valide, des approches alternatives sont nécessaires. Une option consiste à utiliser des plugins jQuery externes comme jQueryRule pour extraire la règle d'origine.

Veuillez noter que l'accès aux propriétés de style des pseudo-éléments avec jQuery peut être difficile. Réfléchissez attentivement s'il existe des approches alternatives qui pourraient répondre plus efficacement à vos besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!