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

Comprendre le combinateur frère adjacent CSS :

En CSS, le symbole est connu sous le nom de combinateur frère adjacent. Il vous permet de cibler des éléments HTML spécifiques positionnés les uns à côté des autres.

Comment fonctionne le combinateur ?

Le combinateur garantit que l'élément ciblé (le deuxième élément dans le sélecteur) doit suivre immédiatement le premier élément (le premier élément dans le sélecteur). Il ne doit y avoir aucun autre élément entre les deux éléments pour que le sélecteur corresponde.

Exemple : h2 p

Considérez la règle CSS suivante :

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

Cette règle cible tous les éléments p adjacents aux éléments h2. En d'autres termes, cela n'affectera que les éléments p qui apparaissent immédiatement après les éléments h2.

Illustration

Prenons ce code HTML comme exemple :

<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>

Seul le premier élément p sera sélectionné par le sélecteur h2 p car il est adjacent à un h2. Le deuxième élément p n'est pas sélectionné car il est séparé du h2 par un

. L'élément p dans la citation de bloc n'est pas non plus sélectionné car il n'y a aucun élément h2 qui le précède immédiatement dans le même bloc.

Distinction par rapport au combinateur général des frères et sœurs ~

Contrairement le combinateur, le combinateur frère général ~ ne nécessite pas de placement adjacent. Il sélectionne les éléments frères et sœurs, quelle que soit leur position les uns par rapport aux autres.

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!