Maison  >  Article  >  interface Web  >  Comment le combinateur \" \" dans CSS cible-t-il les éléments qui suivent immédiatement les frères et sœurs ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-10-30 20:29:30280parcourir

How Does the

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn