recherche

Maison >interface Web >tutoriel CSS >Quelle est la différence entre les sélecteurs `div p` et `div ~ p` en CSS ?

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

Linda Hamilton
Linda Hamiltonoriginal
2024-11-01 09:03:30730parcourir

What's the Difference between the `div p` and `div ~ p` Selectors in 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