Quelle est la différence entre les sélecteurs CSS \'div p\' et \'div ~ p\' ?

Distinction entre les sélecteurs 'div p' et 'div ~ p'

Dans le monde du CSS, les sélecteurs frères adjacents comme 'div p ' et 'div ~ p' sont utilisés pour cibler les éléments positionnés directement après ou avant un élément spécifique. Cependant, comprendre la différence subtile entre ces sélecteurs peut prêter à confusion.

'div p' : frère immédiat

Le sélecteur 'div p' cible spécifiquement les éléments ('p ') qui sont directement adjacents aux éléments 'div'. Cela signifie que si un élément « p » apparaît immédiatement après un élément « div », il sera sélectionné par cette règle. Cependant, si d'autres éléments (comme des titres, des listes ou même du texte) apparaissent entre les éléments 'div' et 'p', la règle ne s'appliquera pas.

'div ~ p' : Tous Frères et sœurs excluant l'immédiat

En revanche, le sélecteur 'div ~ p' cible tous les éléments 'p' qui apparaissent après un élément 'div', qu'il y ait ou non des éléments intermédiaires. Ainsi, alors que le sélecteur « div p » sélectionnerait uniquement le premier élément « p » suivant immédiatement un « div », le sélecteur « div ~ p » sélectionnerait également tous les éléments « p » suivants.

Sélection d'un élément avant un autre

Si votre objectif est de cibler un élément situé juste avant un élément spécifique, aucun de ces sélecteurs frères adjacents ne suffirait. Au lieu de cela, vous devrez utiliser le « sélecteur de frère ou sœur adjacent avec le signe plus » (« X Y »).

Syntaxe : E1 E2

Explication :

• E1 représente l'élément que vous souhaitez faire correspondre.
• E2 représente l'élément qui doit précéder E1.

Dans votre scénario spécifique , si vous souhaitez sélectionner un élément placé immédiatement avant les éléments 'div', vous pouvez utiliser le CSS suivant :

<code class="css">E + div {
    ...
}</code>

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!