Comment fonctionne le signe plus ( ) dans le combinateur de frères et sœurs adjacents CSS ?

Combinateur de frères et sœurs adjacents CSS : comprendre le signe plus

En CSS, le signe plus ( ) est utilisé comme combinateur de frères et sœurs adjacents. Cela signifie qu'il sélectionne les éléments qui suivent immédiatement un élément spécifique.

Exemple :

<code class="css">h2 + p {
  font-size: 1.4em;
  font-weight: bold;
  color: #777;
}</code>

Dans cette règle, le sélecteur h2 p cible tous les p éléments qui viennent directement après un élément h2.

Comment ça marche :

Le combinateur frère adjacent garantit que l'élément sélectionné :

• suit l'élément précédent immédiatement sans aucun élément intermédiaire.
• Partage le même élément parent.

Illustration :

Considérez la structure HTML suivante :

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

<h2>Another headline!</h2>
<blockquote>
    <p>A quotation.</p>      <!-- Not selected -->
</blockquote></code>

Résultats :

• Sélectionné :Le premier élément p car il suit directement un élément h2.
• Non sélectionné : Le deuxième élément p car il ne suit pas immédiatement un élément h2.
• Non sélectionné : L'élément p dans la citation car un élément h2 ne le fait pas. ne le précède pas dans la citation de bloc.

Utilisation :

Le combinateur frère adjacent est utile pour styliser des séquences spécifiques d'éléments dans un document, par exemple :

• Rendu des paragraphes visuellement distincts qui suivent les titres.
• Souligner les lignes alternées dans un tableau.
• Créer des menus déroulants adjacents aux liens de navigation.

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!