Les combinateurs frères et sœurs peuvent-ils sélectionner des pseudo-éléments :before ou :after en CSS ?

Les combinateurs frères et sœurs peuvent-ils cibler :avant ou :après des pseudo-éléments ?

En CSS, les combinateurs frères et sœurs sont utilisés pour appliquer des styles aux éléments qui partagent le même parent mais ne s'imbriquent pas les uns dans les autres. Cependant, ces combinateurs peuvent-ils être utilisés pour cibler des pseudo-éléments, tels que :before et :after ?

Le défi

Considérez les CSS et HTML suivants code:

CSS:

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

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

HTML:

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

L'intention

Ce CSS vise à ajouter un marqueur rouge aux ancres commençant par « http », mais il ne doit pas ajouter le marqueur aux ancres qui contiennent une image. Étant donné que les balises d'ancrage ne peuvent pas être ciblées directement à l'aide d'éléments img, on suppose que les combinateurs frères et sœurs pourraient cibler le pseudo-élément :after des balises d'ancrage qui ont des images frères et sœurs.

Le problème

Cependant, ce CSS ne fonctionne pas comme prévu. Le pseudo-élément n'est pas masqué pour les ancres qui contiennent une image.

L'explication

La raison de ce comportement réside dans la nature des pseudo-éléments. Les pseudo-éléments ne font pas partie de l'arborescence DOM et sont générés par le navigateur. En conséquence, les combinateurs frères et sœurs ne peuvent pas les cibler directement.

La spécification CSS déclare : « 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 analyser )."

La solution

Pour obtenir l'effet souhaité, JavaScript doit être utilisé. Un script pourrait parcourir les balises d'ancrage et ajouter ou supprimer le style souhaité en fonction du contenu de leur image.

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!