Comment sélectionner des éléments immédiatement avant un élément donné : comprendre les sélecteurs de frères et sœurs adjacents « » (Plus) et « ~ » (Tilde) en CSS ?

Sélecteurs de frères et sœurs adjacents : comprendre la différence entre div p (Plus) et div ~ p (Tilde)

Lorsque vous travaillez avec des sélecteurs CSS, il est essentiel de saisir la distinction entre les sélecteurs div p (plus) et div ~ p (tilde). Bien qu'ils semblent similaires, leurs implications diffèrent considérablement.

Sélecteur div p (Plus)

Le sélecteur div p sélectionne tous les éléments <p> les éléments immédiatement placés après <div> éléments. Cela signifie que le <p> les éléments doivent être les frères et sœurs directs des éléments <div> éléments.

Sélecteur div ~ p (Tilde)

Contrairement au sélecteur div p, le sélecteur div ~ p sélectionne tous les éléments <p> les éléments précédés de <div> éléments. Cela inclut non seulement les frères et sœurs directs, mais également tout autre <p> éléments qui viennent après tout <div> élément dans l'arborescence du document.

Choisir le bon sélecteur

Pour répondre à votre requête concernant la sélection d'éléments placés immédiatement avant un élément donné, vous devez utiliser la syntaxe suivante :

E1 E2

Ce sélecteur correspond aux éléments E2 qui sont immédiatement précédés des éléments E1. Dans votre cas, vous utiliseriez div p pour sélectionner <p> éléments adjacents et précédents <div> éléments.

Exemple

Considérez le code HTML et CSS suivant :

<code class="html">&lt;div id=&quot;container&quot;&gt;
    &lt;ul&gt;
        &lt;li&gt;List Item&lt;/li&gt;
        &lt;li&gt;List Item&lt;/li&gt;
        &lt;li&gt;List Item&lt;/li&gt;
        &lt;li&gt;List Item&lt;/li&gt;
    &lt;/ul&gt;
    &lt;p&gt;This will be red&lt;/p&gt;
    &lt;p&gt;This will be black&lt;/p&gt;
    &lt;p&gt;This will be black&lt;/p&gt;
&lt;/div&gt;</code>

<code class="css">ul + p {
    color: red;
}</code>

Dans cet exemple, seul le <p&gt ; qui est immédiatement précédé de l'élément <ul> l'élément aura du texte en rouge. En effet, le sélecteur ul p ne correspond qu'aux frères et sœurs directs.

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!