Pourquoi ne puis-je pas masquer un pseudo-élément à l'aide de combinateurs frères et sœurs et comment puis-je y parvenir ?

Ciblage des pseudo-éléments avec des combinateurs frères et sœurs

Dans le but de dissimuler un pseudo-élément généré après des balises d'ancrage spécifiques tout en évitant ces images d'habillage, le CSS suivant a été implémenté :

a[href^="http"]:after {
    /* Styling for the pseudo-element */
}

a[href^="http"] img ~ :after {
    display: none;
}

Cependant, cette approche a échoué sur les points suivants HTML :

<a href="http://google.com">Test</a>
<a href="http://google.com">
    <img src="https://www.google.com/logos/classicplus.png">
</a>

Pourquoi cette tentative échoue-t-elle ?

Réponse :

Cibler un pseudo-élément (:after) avec un combinateur frère (|) n'est pas possible car le contenu du pseudo-élément n'est pas restitué dans le DOM et ne le manipule pas. Par conséquent, CSS ne peut pas modifier le DOM pour masquer le pseudo-élément en fonction de la présence d'une image sœur. Comme indiqué dans la spécification CSS2 :

"Le contenu généré ne modifie pas l'arborescence du document."

Pour résoudre ce problème, vous pouvez envisager d'utiliser JavaScript pour masquer dynamiquement le pseudo-élément en fonction du présence d'une image de frère ou de sœur.

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!