Plusieurs sélecteurs en CSS

CSS (Cascading Style Sheets) est un langage de style utilisé pour contrôler le style et la mise en page des fichiers HTML et XML. En CSS, un sélecteur fait référence à un modèle utilisé pour sélectionner des éléments HTML. Les sélecteurs sont l'un des composants les plus fondamentaux du CSS, qui peuvent appliquer différents styles à différents éléments pour embellir et optimiser les pages Web.

Il existe de nombreux types de sélecteurs en CSS, et chaque sélecteur a des fonctions et des scénarios d'application différents. Dans cet article, nous présenterons plusieurs sélecteurs CSS courants pour aider les lecteurs à mieux maîtriser les bases du CSS.

1. Sélecteur de balises

Le sélecteur de balises fait référence à la sélection du nom de l'élément HTML comme sélecteur, par exemple, pour sélectionner tous les paragraphes, nous pouvons utiliser p comme sélecteur :

p {
  color: red;
  font-size: 16px;
}

Le code ci-dessus définit la couleur de la police de tous les paragraphes en rouge et définissez la taille de la police sur 16 pixels. Les sélecteurs de balises sont parfaits pour les situations où vous devez appliquer le même style à tous les éléments du même type dans une page Web.

2. Sélecteur de classe

Le sélecteur de classe fait référence à l'utilisation d'un point (.) comme préfixe, suivi du nom de classe spécifié comme sélecteur, par exemple :

.button {
  background-color: blue;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
}

Le code ci-dessus sélectionne tous les éléments avec la classe "bouton" Définissez la couleur d'arrière-plan sur bleu, définissez la couleur de police sur blanc, définissez la bordure sur des coins arrondis, etc. Les sélecteurs de classe sont souvent utilisés pour spécifier un groupe d'éléments ayant un style commun.

3. Sélecteur d'ID

Le sélecteur d'ID utilise un signe # comme préfixe, suivi du nom d'ID spécifié comme sélecteur, par exemple :

#header {
  background-color: gray;
  color: white;
  height: 100px;
}

Le code ci-dessus définit la couleur d'arrière-plan de l'élément avec l'ID "en-tête " en gris, définissez la couleur de la police sur blanc et définissez la hauteur de l'élément sur 100 pixels. Le sélecteur d'ID ne peut être utilisé que pour spécifier un élément spécifique car l'ID de chaque élément en HTML est unique.

4. Sélecteur d'attribut

Le sélecteur d'attribut fait référence à l'utilisation du nom et de la valeur de l'attribut entre crochets comme sélecteur, par exemple :

a[href="https://www.google.com"] {
  color: blue;
  text-decoration: none;
}

Le code ci-dessus définit tous les attributs href sur "https://www.google. com" définissez la couleur de l'élément de lien hypertexte sur bleu et supprimez le soulignement. Les sélecteurs d'attributs peuvent être utilisés pour sélectionner des éléments plus précisément et pour définir des styles en fonction des valeurs d'attribut de l'élément.

5. Sélecteur descendant

Le sélecteur descendant fait référence à un sélecteur qui sélectionne en spécifiant la relation hiérarchique entre les éléments. Par exemple, si nous voulons sélectionner l'élément p dans un élément div, nous pouvons utiliser le code suivant :

div p {
  font-style: italic;
}

Le code ci-dessus mettra tous les éléments p dans l'élément div en italique. Les sélecteurs descendants peuvent également être utilisés pour sélectionner des éléments spécifiques dans des structures imbriquées.

6. Sélecteur enfant

Un sélecteur enfant fait référence à un sélecteur qui sélectionne tous les éléments enfants directs qui remplissent les conditions, c'est-à-dire le format « élément parent > élément enfant ». Par exemple, si nous voulons sélectionner les éléments enfants directs ul dans tous les éléments div avec la classe "menu", nous pouvons utiliser le code suivant :

div.menu > ul {
  padding-left: 0;
}

Le code ci-dessus sélectionnera les éléments enfants directs ul dans tous les éléments div avec la classe " menu" Le remplissage gauche (padding-left) est défini sur 0. Les sélecteurs enfants ont des fonctionnalités similaires aux sélecteurs descendants, mais ne fonctionnent que sur les éléments enfants directs.

Ci-dessus sont plusieurs sélecteurs courants en CSS. Différents sélecteurs peuvent sélectionner et appliquer différents styles d'éléments en fonction de différents besoins. Nous espérons que les lecteurs pourront mieux maîtriser les connaissances de base du CSS en comprenant ces sélecteurs, afin d'écrire des pages Web belles et stables.

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!