Comment puis-je styliser un paragraphe suivant un titre spécifique en utilisant CSS ?

Sélection de l'élément suivant à l'aide de CSS : le sélecteur de frères et sœurs adjacents

Lorsque vous travaillez avec HTML, vous pouvez rencontrer des scénarios dans lesquels vous devez appliquer un style à des éléments spécifiques qui suivent d'autres dans l'arborescence DOM. En CSS, cela peut être réalisé en utilisant le sélecteur de frère adjacent, représenté par le signe plus ( ).

Dans votre exemple, vous souhaitez appliquer le clear: Both; règle à chaque

qui suit la balise

tag avec la classe hc-reform. Pour ce faire, le sélecteur CSS correct serait :

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

Le sélecteur frère adjacent garantit que le clear: Both; la règle s'applique uniquement à

qui suivent immédiatement le

.hc-reform

en-tête. Il est important de noter que ce sélecteur n'est pas pris en charge dans Internet Explorer 6 ou version antérieure.

Donc, pour résoudre le problème que vous avez mentionné, où h1.hc-reform > p ne fonctionnait pas, c'est parce que ce sélecteur représente le sélecteur enfant direct, qui sélectionne uniquement

balises qui sont des enfants directs de

.hc-reform

. Dans votre cas, le

les balises ne sont pas des enfants directs mais plutôt des frères et sœurs suivants, donc le sélecteur h1.hc-reform p est le bon choix.

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!