简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Utilisez le sélecteur de pseudo-classe :nth-child(odd) pour sélectionner le style des éléments enfants aux positions impaires.

WBOY
Libérer： 2023-11-20 11:35:01
original
987 Les gens l'ont consulté

Utilisez le sélecteur de pseudo-classe :nth-child(odd) pour sélectionner le style des éléments enfants aux positions impaires.

Lorsque nous concevons des pages Web, nous devons parfois effectuer un style spécial sur les sous-éléments de la page. Parmi eux, le sélecteur de pseudo-classe :nth-child (impair) est souvent utilisé. Ce sélecteur est utilisé pour sélectionner des éléments enfants à des positions impaires pour la modification de style. Ensuite, nous montrerons comment utiliser le sélecteur de pseudo-classe :nth-child(odd) à travers des exemples de code spécifiques.

Tout d’abord, créons une structure HTML simple, comprenant un élément parent et plusieurs éléments enfants. Le code est le suivant : 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Utilisez le sélecteur de pseudo-classe :nth-child(odd) pour sélectionner le style des éléments enfants aux positions impaires.</title>
  <style>
    .parent {
      display: flex;
      justify-content: space-between;
      width: 80%;
      margin: 0 auto;
    }
    .child {
      width: 100px;
      height: 100px;
      background-color: #f2f2f2;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px;
    }
    .child:nth-child(odd) {
      background-color: #ffcccc;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</body>
</html>
Copier après la connexion

Dans cet exemple, nous créons d'abord un élément parent qui contient plusieurs éléments enfants et utilisons la disposition Flex pour organiser les éléments enfants. Ensuite, nous définissons la largeur, la hauteur, la couleur d'arrière-plan et d'autres attributs pour le style de base de l'élément enfant. Ensuite, dans le sélecteur .child:nth-child(odd), nous utilisons le sélecteur de pseudo-classe :nth-child(odd) pour sélectionner les éléments enfants à des positions impaires et définir leur couleur d'arrière-plan sur rose. De cette façon, vous pouvez facilement modifier le style des éléments enfants impairs via le sélecteur de pseudo-classe :nth-child(odd).

Lorsque nous exécutons ce code dans le navigateur, nous pouvons voir que la couleur d'arrière-plan des éléments enfants dans des positions impaires passe au rose, tandis que la couleur d'arrière-plan des éléments enfants dans des positions paires reste grise. Ceci est un exemple d'utilisation du sélecteur de pseudo-classe :nth-child(odd).

Dans la conception Web réelle, nous utilisons souvent le sélecteur de pseudo-classe :nth-child (impair) pour définir des styles spéciaux pour les éléments enfants à des positions impaires, ce qui peut apporter des effets visuels plus riches à la page. J'espère qu'à travers les exemples de cet article, tout le monde pourra devenir plus compétent dans l'utilisation du sélecteur de pseudo-classe :nth-child (impair) pour embellir le style des éléments enfants de la page.

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!

Étiquettes associées：
Sélecteur de pseudo-classe :nth-child Positions impaires Sélectionnez les éléments enfants impairs
source：php.cn
Article précédent：Comment utiliser : sélecteur de pseudo-classe désactivé pour changer le style des éléments de formulaire désactivés Article suivant：Utilisez le sélecteur de pseudo-classe :enabled pour modifier les styles des éléments de formulaire disponibles
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Sélectionnez les produits liés au woocommerce à l'aide d'une taxonomie personnalisée avec une hiérarchie à 3 niveaux J'ai une boutique woocommerce avec une classification personnalisée « Sports ». La classif...
Depuis 2024-04-06 20:05:30
0
1
544
Impossible d'obtenir l'élément d'entrée du site Web J'essaie donc d'obtenir un élément d'entrée de Twitter mais lorsque je l'exécute, cela con...
Depuis 2024-04-06 18:59:57
0
1
442
vue vee-validate capture le problème de la sélection du sélecteur de date La liaison v-model sur mon champ de sélecteur de date ne fonctionne pas correctement. Lors...
Depuis 2024-04-06 11:38:56
0
1
510
Comment insérer plusieurs lignes dans une table MySQL et renvoyer de nouveaux identifiants ? Normalement, je peux insérer une ligne dans une table MySQL et obtenir le last_insert_id. ...
Depuis 2024-04-06 10:03:44
0
2
294
Utilisez JS pour contrôler la qualité de lecture Existe-t-il un moyen de contrôler la qualité de lecture d'une vidéo à l'aide de Javascript...
Depuis 2024-04-04 00:21:55
0
1
384
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！