Les combinateurs frères et sœurs peuvent-ils cibler des pseudo-éléments en CSS ?

Combinateurs frères et sœurs et pseudo-éléments : limites du ciblage

Les pseudo-éléments peuvent-ils être ciblés à l'aide de combinateurs frères ? Un problème CSS récent a suscité cette question.

Dans ce scénario, une balise d'ancrage avec une image précédente ne doit pas afficher de pseudo-élément. Il n’est pas possible de cibler directement l’ancre en raison de la présence de l’image. Par conséquent, une approche alternative utilisant un combinateur frère sur le pseudo-élément a été tentée, comme indiqué ci-dessous :

a[href^="http"]:after {
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: red;
}

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

Cependant, le CSS ne parvient pas à masquer le pseudo-élément lorsque la balise d'ancrage entoure une image. Pourquoi en est-il ainsi ?

La limitation réside dans la nature des pseudo-éléments. Le contenu généré, y compris les pseudo-éléments, n'est pas inclus dans le DOM et n'affecte pas le document original. Ceci est explicitement indiqué dans la spécification CSS :

"Le contenu généré ne modifie pas l'arborescence du document. En particulier, il n'est pas renvoyé au processeur de langage du document (par exemple, pour l'analyse)."

Par conséquent, le combinateur frère ne peut pas cibler un pseudo-élément :before ou :after puisqu'ils ne font pas partie de la structure DOM.

Pour Dans des scénarios similaires, envisagez d'utiliser JavaScript pour manipuler le DOM de manière dynamique et obtenir les effets de style souhaités.

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!