Comment le combinateur CSS \' \' sélectionne-t-il les éléments frères adjacents ?

Sélection des frères et sœurs adjacents : exploration du combinateur CSS ' '

En CSS, le caractère ' ' assume le rôle du combinateur frère adjacent . Cet opérateur polyvalent vous permet de spécifier un sélecteur pour cibler les éléments immédiatement précédés d'un élément frère spécifique.

Pour illustrer sa fonctionnalité, disséquons la règle CSS suivante :

h2 + p {
  font-size: 1.4em;
  font-weight: bold;
  color: #777;
}

Ceci La règle cible tous les éléments « p » qui suivent directement un en-tête « h2 ». Les éléments qui satisfont à cette condition hériteront des propriétés de style spécifiées, telles qu'une taille de police accrue, un poids en gras et une couleur #777.

Considérez la structure HTML suivante à titre d'exemple :

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

Le sélecteur CSS 'h2 p' sélectionnerait uniquement le premier élément 'p', qui est immédiatement adjacent à l'en-tête 'h2' intitulé "Headline!". Ceci est désigné par « [1] » dans l’exemple. Le deuxième élément 'p', en revanche, n'est pas directement précédé d'un 'h2' et n'est donc pas sélectionné '[2]'.

De plus, le combinateur frère adjacent peut être utilisé en conjonction avec le combinateur général de frères et sœurs « ~ », qui permet une correspondance plus flexible. Par exemple, le sélecteur 'h2 ~ p' correspondrait à n'importe quel élément 'p' qui apparaît après un en-tête 'h2', qu'il soit immédiatement adjacent ou non.

Essentiellement, le combinateur frère adjacent en CSS autorise vous pouvez sélectionner avec précision les éléments HTML en fonction de leur position par rapport à leurs frères et sœurs, ce qui permet un contrôle précis du style et de la mise en page.

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!