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

Comprendre les sélecteurs Div P et Div ~ P

Les sélecteurs div p et div ~ p ciblent les éléments HTML en fonction de leur relation au sein du arborescence des documents. Cependant, il existe une différence subtile entre les deux.

• Div P (sélecteur plus) : Sélectionne tous les

  les éléments qui suivent immédiatement

  éléments, sans éléments intermédiaires.
• Div ~ P (sélecteur tilde) : Sélectionne tous les éléments

  les éléments précédés de

  éléments, quelle que soit la distance.

Quand utiliser le sélecteur Plus

Utilisez le sélecteur lorsque vous souhaitez cibler uniquement l'élément immédiatement adjacent à l'élément donné élément. Par exemple, si vous avez un

contenant une liste et que vous souhaitez mettre en surbrillance le premier paragraphe après chaque liste, vous pouvez utiliser :

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

Quand utiliser le sélecteur Tilde

Utiliser le sélecteur ~ lorsque vous souhaitez cibler tous les éléments précédés de l'élément donné, même s'il y a d'autres éléments entre les deux. Par exemple, si vous souhaitez mettre en surbrillance tous les titres après

éléments :

<code class="css">div ~ h2 {
  color: blue;
}</code>

Un cas particulier : sélection d'éléments précédant un élément donné

Si vous devez sélectionner des éléments placés immédiatement avant un élément donné, il existe un sélecteur différent : sélecteur frère adjacent X Y.

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

Ce sélecteur correspond à tous les

les éléments qui suivent directement

éléments, sans aucun autre élément entre les deux.

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!

css html if for select this ul

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment désactiver le défilement horizontal sur votre site Web ?Article suivant：Comment désactiver le défilement horizontal sur votre site Web ?

Articles Liés

Voir plus

• Pouvez-vous modifier la couleur d'arrière-plan des options de la liste de sélection lors du survol avec HTML et CSS ?
• Pourquoi mon ombre de boîte en médaillon ne fonctionne-t-elle pas sur les images en CSS ?
• Comment puis-je dessiner un triangle dans le coin d’un div en utilisant le positionnement absolu ?
• Comment résoudre les problèmes d’image d’arrière-plan pour les listes déroulantes sélectionnées dans Chrome ?
• Comment empêcher les transitions CSS de se déclencher lors du chargement de la page dans Google Chrome ?