Comment puis-je utiliser CSS pour styliser un paragraphe uniquement lorsqu'il suit directement un élément H1 spécifique ?

Comprendre le sélecteur de frères et sœurs adjacents CSS

Lors du style des éléments HTML, la possibilité de cibler des éléments spécifiques en fonction de leurs relations est cruciale. C'est là qu'intervient le sélecteur de frères et sœurs adjacents CSS.

Énoncé du problème

Considérez le code HTML et CSS suivant :

<h1>

L'objectif est de garantir que chaque

La balise qui suit l'élément h1.hc-reform a la propriété clear : les deux.

Tentative incorrecte

La tentative effectuée :

h1.hc-reform > p {
  clear: both;
}

ne fonctionne pas car le > le sélecteur sélectionne uniquement les éléments enfants directs. Dans ce cas, le symbole

La balise n'est pas un enfant direct de l'élément h1.hc-reform.

Sélecteur de frères et sœurs adjacents

Pour obtenir le résultat souhaité, le sélecteur de frères et sœurs adjacents doit être utilisé. Il est représenté par un signe plus ( ).

h1.hc-reform + p {
  clear: both;
}

Ce sélecteur cible les éléments qui viennent immédiatement après l'élément spécifié, dans ce cas, le

balise immédiatement après l'élément h1.hc-reform.

Remarque : Le sélecteur de frère adjacent n'est pas pris en charge dans Internet Explorer 6 et les versions antérieures.

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!