3. Sélecteur de frères et sœurs adjacents : sélectionnez des éléments en fonction de leur relation fraternelle adjacente.

h1 + p {  
color: red;
}

Dans l'exemple ci-dessus, l'élément

qui suit immédiatement l'élément

sera sélectionné et la couleur du texte sera définie sur rouge.

4. Sélecteur général de frères et sœurs : sélectionnez des éléments en fonction de leur relation fraternelle.

h1 ~ p {  
font-style: italic;
}

Copier après la connexion

Dans l'exemple ci-dessus, tous les éléments

situés après l'élément

seront sélectionnés et le style de police sera défini sur italique.

Ces sélecteurs relationnels peuvent nous aider à sélectionner des éléments avec plus de précision et à appliquer des styles en fonction de la relation spécifique entre eux. En utilisant rationnellement les sélecteurs relationnels, nous pouvons contrôler de manière flexible le style des éléments sur la page.