interface Web
tutoriel CSS
Comment utiliser des CSS purs pour obtenir l'effet des couleurs des éléments alternés par n% 3?
Comment utiliser des CSS purs pour obtenir l'effet des couleurs des éléments alternés par n% 3?
CSS pur réalise l'effet N% 3 cycle de la couleur des éléments
Dans le développement frontal, il est souvent nécessaire d'allouer dynamiquement les couleurs en fonction des positions des éléments, telles que la réalisation de l'effet des cycles de couleur par n% 3. Cet article expliquera comment réaliser cet effet en utilisant CSS uniquement.
Supposons que la structure HTML est la suivante:
<div class="container"> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div>
L'objectif est de faire changer cycliquement la couleur de l'élément P en fonction de sa position (n% 3 résultat): n% 3 == 0 est la couleur 1, n% 3 == 1 est la couleur 2, et n% 3 == 2 est la couleur 3.
Tout d'abord, définissez la variable CSS pour stocker la valeur de la couleur:
.Container {
--Color1: #fff;
--Color2: # da3838;
--Color3: RVB (49, 196, 23);
}
Ensuite, utilisez nth-child Pseudo-Class et la var() calc() pour appliquer dynamiquement la couleur:
.Container P: Nth-Child (3n 1) {
Color d'arrière-plan: var (- color1);
}
.Container P: Nth-Child (3n 2) {
Color d'arrière-plan: var (- color2);
}
.Container P: Nth-Child (3n 3) {
Color d'arrière-plan: var (- Color3);
}
Dans le code, 3n 1 , 3n 2 , 3n 3 sélectionnent des éléments qui satisfont n% 3 == 0, n% 3 == 1, n% 3 == 2, respectivement, et appliquent des couleurs prédéfinies via la fonction var() . De cette façon, la couleur d'arrière-plan de chaque élément p cyclinera automatiquement en fonction de sa position dans .container , et l'effet de boucle de couleur N% 3 de CSS pur peut être réalisé sans JavaScript.
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Stock Market GPT
Recherche d'investissement basée sur l'IA pour des décisions plus intelligentes
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment activer le mode de lecture par 360 Browser_360 BROWNER MODE IMMERSIVE MODE Activation Tutoriel
Sep 28, 2025 am 10:21 AM
Le navigateur 360 peut activer le mode de lecture via des icônes de barre d'adresse, des touches de raccourci F9 ou des options de menu, extraire automatiquement des articles et optimiser la composition, offrant une expérience de lecture immersive sans interférence.
Comment aligner les éléments au bas d'un conteneur flexible avec CSS
Oct 04, 2025 am 03:45 AM
L'utilisation de CSS pour aligner les éléments au bas du conteneur Flex nécessite une méthode de sélection en fonction de la direction de la disposition: Si la direction flexible est une colonne, définissez-le-contenu: Flex-End pour aligner tous les enfants en bas; S'il s'agit d'une disposition des lignes, alignez-vous: Flex-End pour aligner les enfants individuels au bas de l'axe transversal; ou utiliser la marge: Auto pour les enfants spécifiques dans la disposition des colonnes pour les faire en bas du conteneur et d'autres éléments restent en haut. Quoi qu'il en soit, le conteneur doit avoir une hauteur claire pour garantir que l'alignement entre en vigueur.
Comment utiliser la propriété de position dans CSS?
Oct 01, 2025 am 03:47 AM
ThefivecsspositionValuesArestatic, relative, absolu, fixe et sticky.staticisthedefault, suivant NormaldocumentflowwithoutoffsetCapabilities.Relativeallowsoffsetfromtheement'soriginal position
Comment créer une disposition réactive sans requêtes multimédias dans CSS?
Sep 28, 2025 am 03:58 AM
Utilisez Flexbox, CSSGrid, des unités relatives et des fonctions CSS modernes pour créer des dispositions réactives sans requêtes multimédias. 1. Flexbox réalise l'enveloppement automatique des lignes et la mise à l'échelle du contenu via des attributs Flex-Wrap et Flex; 2. CSSGrid combine des unités Auto-Fit, Minmax et FR pour créer une grille adaptative; 3. Utilisez des unités relatives telles que%, REM, VW pour vous assurer que la taille change avec la fenêtre; 4. Utiliser des fonctions telles que clamp () pour définir la plage de taille élastique, de sorte que la disposition s'adapte naturellement à différents écrans.
Comment créer un simple CSS Charging Spinner
Oct 04, 2025 am 03:47 AM
Créez un div avec classe = "chargeur" comme chargeur. 2. Utilisez CSS pour régler la largeur, la hauteur, la bordure et le coin arrondi pour former un cercle, et réalisez la rotation visuelle à travers les différences de couleurs de bordure. 3. Ajoutez l'animation de spin définie par @keyframes pour la faire tourner en continu. 4. Utilisez éventuellement Flexbox pour centrer le chargeur à afficher.
Comment empêcher une pause de page lors de l'impression avec CSS
Sep 28, 2025 am 01:10 AM
Utilisez la rupture: Évitez d'éviter la pagination dans les éléments, combinez la rupture avant et la rupture pour contrôler la position de la pagination et ajouter le pain-inside: éviter d'être compatible avec les anciens navigateurs pour vous assurer que le contenu est complet et non divisé lors de l'impression.
Comment utiliser la propriété de contour dans CSS et comment elle diffère de la bordure
Sep 29, 2025 am 12:08 AM
A découvert que les opinions ontffectées à l'origine de la drawnoutodBorders, ce qui fait de la réalisation des pourhalons de loi; utilisez la transtucture des efforts et de la ligne de diagramme.
Comment créer un effet de superposition d'image sur le plan de volant avec CSS
Sep 29, 2025 am 04:09 AM
Tout d'abord, créez une structure HTML et configurez un conteneur de positionnement relatif, puis masquez la superposition via CSS, et utilisez enfin le: survolez pour déclencher l'effet de transition d'opacité pour afficher la superposition translucide et le contenu texte en option.
