Comment le combinateur \' \' dans CSS cible-t-il les éléments qui suivent immédiatement les frères et sœurs ?

Comprendre le combinateur " " en CSS

CSS utilise le combinateur " " pour cibler les éléments qui suivent immédiatement des frères et sœurs spécifiques. Par exemple, dans la règle "h2 p", seul l'élément p immédiatement après un élément h2 sera affecté par les styles spécifiés.

Visualiser le concept

Considérez le code HTML suivant :

<code class="html"><h2>Headline!</h2>
<p>The first paragraph.</p> <!-- Selected [1] -->
<p>The second paragraph.</p> <!-- Not selected [2] -->

<h2>Another headline!</h2>
<blockquote class="quote">
    <p>A quotation.</p> <!-- Not selected [3] -->
</blockquote></code>

Lors de l'application du sélecteur "h2 p" :

• [1] Le premier paragraphe (

  ) est sélectionné car il suit directement un élément h2 (

  ).

• [2] Le deuxième paragraphe (

  ) n'est pas sélectionné car il suit le premier paragraphe, pas l'élément h2.

• [3] Le paragraphe dans la citation de bloc (

  ) n'est pas sélectionné car il n'y a pas de h2 qui le précède dans la citation de bloc.

Comparaison avec le combinateur "~"

Le combinateur " " sélectionne spécifiquement uniquement les éléments qui sont des frères et sœurs immédiats, contrairement au combinateur "~" qui sélectionne tous les éléments frères, quel que soit leur position. Par exemple, "h2 ~ p" sélectionnerait les deux paragraphes dans le code HTML ci-dessus, tandis que "h2 p" sélectionnerait uniquement le premier paragraphe.

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!