Que sont les sélecteurs contextuels en CSS ?-tutoriel CSS-php.cn

Que sont les sélecteurs contextuels en CSS ?

WBOY

Libérer： 2023-08-26 20:29:19

avant

934 Les gens l'ont consulté

CSS 中的上下文选择器是什么？

Les sélecteurs contextuels permettent aux développeurs de choisir différents types de styles pour différentes parties du document. En CSS, les développeurs peuvent spécifier des styles directement ou en créant certaines classes pour spécifier des styles. Les sélecteurs contextuels appliquent uniquement des styles aux éléments spécifiés. La relation parent-enfant entre les éléments d'un document peut être appelée contexte. Un sélecteur de contexte aura 2 ou plusieurs sélecteurs distincts.

Dans cet article, nous apprendrons ce qu'est le sélecteur contextuel en CSS et comment l'utiliser.

Qu'est-ce qu'un sélecteur contextuel et pourquoi l'utilisons-nous ?

Le sélecteur de contexte contient deux sélecteurs tels que la classe ou l'identifiant, appelés sélecteurs simples. Examinons la syntaxe du sélecteur de contexte afin de comprendre ce que cela signifie et comment l'utiliser.

Grammaire

div{color: blue}
span{color: green}

Copier après la connexion

Dans la syntaxe ci-dessus, vous pouvez voir que nous utilisons n'importe quel sélecteur simple, séparé par des espaces. Nous pouvons appliquer n'importe quelle propriété CSS à n'importe quel élément spécifique que nous souhaitons styliser, et le style sera appliqué à tous les éléments contextuels dans l'ensemble du document HTML. Jetons un coup d'œil au résultat pour mieux comprendre le sélecteur.

Exemple

Méthode - Nous utiliserons une balise div avec 2 balises de paragraphe à l'intérieur, ce qui signifie que le div sera l'élément parent et le paragraphe sera l'élément enfant. Nous utiliserons l'élément parent pour changer la couleur de ces éléments. Maintenant, jetons un œil au code.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>An example of using the contextual selector</title>
   <style>
      div {
         color: yellow;
      }
      p {
         color: lightgreen;
      }
   </style>
</head>
<body>
   <div>
      <p>Hello everyone!!</p>
      <p>How is your day going?</p>
   </div>
   <p>A very good morning to all the readers</p>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous avons créé un div, puis ajouté 2 paragraphes (balises) à l'intérieur de ce div, puis ajouté un paragraphe supplémentaire à l'extérieur de l'élément div, après quoi nous sommes allés dans la section CSS et avons changé la couleur de l'élément div est "jaune". " et les paragraphes sont "vert clair", ce qui signifie que tous les éléments de paragraphe du document HTML auront une couleur "vert clair". Regardons le résultat pour comprendre ce que fait le code ci-dessus.

Dans le résultat ci-dessus, vous pouvez voir que la couleur de tous les paragraphes, même dans le div, est "Vert clair". Mais que se passe-t-il si nous voulons seulement changer la couleur d’un seul paragraphe à l’intérieur d’un élément div ? Vous vous demandez peut-être comment changer la couleur d'un paragraphe à l'intérieur d'un div, mais pas la couleur du paragraphe en dehors du div.

Regardons une autre façon dont les sélecteurs de contexte sont utilisés afin de comprendre la véritable importance des sélecteurs de contexte.

Syntaxe

Utiliser des sélecteurs contextuels

div p{ color: lightgreen;}

Copier après la connexion

Dans la syntaxe ci-dessus, vous pouvez voir que nous ciblons le paragraphe à l'intérieur de l'élément div, et non l'élément à l'extérieur du div.

Regardons un autre exemple afin de pouvoir faire allusion à cette propriété plus spécifiquement.

Exemple

Ici, nous créons une balise de paragraphe qui sera entourée d'une balise div et nous définirons la couleur de ce paragraphe pour qu'elle soit différente de celle du paragraphe en dehors du div. Jetons maintenant un coup d'œil au code pour comprendre comment nous allons procéder.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>An example of using the contextual selector</title>
   <style>
      div p {
         color: lightgreen;
      }
   </style>
</head>
<body>
   <div>
      <p>Hello everyone!!</p>
      <p>How is your day going?</p>
   </div>
   <p>A very good morning to all the readers</p>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, vous pouvez voir que nous avons ajouté 2 paragraphes balises à l'intérieur d'un div, puis ajouté un autre paragraphe en dehors de ce div, puis en utilisant le sélecteur de contexte, nous avons uniquement changé la couleur du paragraphe, il se trouve à l'intérieur du div plutôt qu'à l'extérieur du div. Regardons le résultat pour comprendre ce que fait le code ci-dessus.

Dans la sortie ci-dessus, vous pouvez voir que les deux paragraphes sont de couleur « aqua » et que le paragraphe en dehors de l'élément div est dans la couleur par défaut.

À l'aide de sélecteurs contextuels, un développeur peut spécifier la balise qu'il souhaite cibler pour appliquer des styles et des attributs.

Les 2 exemples ci-dessus montrent comment les développeurs peuvent utiliser des sélecteurs contextuels et appliquer des styles uniquement aux éléments spécifiés.

Conclusion

Les sélecteurs de contexte peuvent sembler déroutants au début, mais ils sont très utiles lorsque l'on souhaite changer le style d'un élément très spécifique. Ces sélecteurs contextuels offrent un plus grand sentiment de contrôle au développeur car il peut modifier le style de tout élément qu'il souhaite modifier.

Dans cet article, nous avons appris comment utiliser le sélecteur de contexte et à quoi sert-il ?

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!