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

Combinateurs frères et sœurs et pseudo-éléments

Dans ce dilemme CSS, nous rencontrons la question de savoir s'il est possible de cibler un pseudo-élément, spécifiquement :before ou :after, en utilisant un combinateur frère.

Considérez ce qui suit CSS :

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

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

Et le HTML suivant :

<a href="http://google.com">Test</a>
<a href="http://google.com">
  <img  src="/static/imghwm/default1.png" data-src="https://www.google.com/logos/classicplus.png" class="lazy" alt="Les combinateurs frères et sœurs peuvent-ils cibler des pseudo-éléments comme : avant ou : après ?" >
</a>

L'intention est d'appliquer un pseudo-élément à toutes les balises d'ancrage correspondantes, à l'exception de celles qui contiennent une image. Cependant, le CSS ne fonctionne pas comme prévu.

La réponse réside dans la nature des pseudo-éléments. Selon la spécification CSS, le contenu généré à partir de pseudo-éléments n'affecte pas la structure DOM. Cela signifie que les combinateurs frères, qui s'appuient sur des éléments présents dans l'arborescence DOM, ne peuvent pas cibler les pseudo-éléments.

En d'autres termes, le CSS tente de masquer le pseudo-élément :after sur les balises d'ancrage qui partagent un parent avec une image. Cependant, comme le pseudo-élément :after n'est pas rendu dans le DOM, il est impossible pour le combinateur frère de le localiser.

Par conséquent, JavaScript est souvent une solution plus adaptée pour cibler des éléments en fonction de leur relations avec d'autres éléments du DOM.

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!