Explication détaillée de l'exemple de pseudo-classe CSS nth-child()

Cet article vous apporte une explication détaillée de l'exemple de pseudo-classe CSS nth-child(), afin que tout le monde puisse comprendre ce que la pseudo-classe nth-child() peut faire. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

La pseudo-classe nth-child() en CSS3 est très utile pour créer des feuilles de style Excel formatées en HTML. Également utilisé pour générer des dispositions en grille sans avoir recours à des tableaux.

Tout d’abord, découvrons la pseudo-classe nth-child(). [Tutoriels vidéo associés recommandés : tutoriel CSS, tutoriel CSS3 ! 】

Règles de base pour la pseudo-classe nth-child() :

La syntaxe que nous utilisons est : nth-child (a n + b ) où a est la fréquence et b est le décalage initial. Cela génère une série infinie commençant à n = 0, mais contenant uniquement des valeurs positives.

Quelques exemples pourraient rendre cela plus clair :

2n, 2n + 0
2,4,6,8,10,12......

2n + 1 ou nombre impair
1,3,5,7,9,11......

2n + 2
2,4,6,8,10,12......

2n + 3
3,5,7,9,11,12......

2n + 4
4,6,8,10,12,14......

3n, 3n + 0 ou 3n + 3
3,6,9,12,15,18......

3n + 1
1,4,7,10,13,16…

Vous pouvez donc voir que la série commence par b puis augmente de a pour chaque valeur. Ignorer les résultats nuls ou négatifs signifie que nous ne pouvons pas regarder en arrière dans l'arborescence DOM.

Exemple de pseudo-classe nth-child() :

Jetons ensuite un coup d'œil à la pseudo-classe nth-child() à travers des exemples Fonction :

Exemple 1 : Utilisé avec le survol

Cet exemple utilise la pseudo-classe du nième enfant et ~ le sélecteur général de frères et sœurs.

Nous créons d'abord la grille en faisant simplement flotter plusieurs conteneurs div vers la gauche et en utilisant nth-child pour démarrer une nouvelle ligne toutes les dix cases :

#stage div {
    float: left;
    margin: 5px;
    width: 60px;
    height: 50px;
    background: #efefef;
}
#stage div:hover { background: red; }
#stage div:nth-child(10n+1) { clear: left; }

Dans Dans le HTML, nous ajouté un identifiant à chaque conteneur div (#div1, #div2, ..., #div100) puis attribué un événement de survol comme celui-ci :

#div1:hover ~ div:nth-child(1n) {
   background: yellow; 
}
#div2:hover ~ div:nth-child(2n) {
   background: yellow; 
}
#div3:hover ~ div:nth-child(3n) {
   background: yellow; 
}
#div4:hover ~ div:nth-child(4n) {
   background: yellow; 
}
...

Cela signifie que lorsque le curseur est sur un div, chaque nième frère de cette div deviendra jaune. Par exemple, lorsque la souris survole le chiffre 3 (#div3), il devient rouge et chaque div multiple de 3 devient jaune. Essayez-le, voyons l'effet :

Exemple 2 : Utilisez nth-child pour formater le tableau

en CSS A plus Un exemple typique est de savoir comment formater des tableaux HTML pour leur donner un aspect plus professionnel. Par exemple : Alternance de couleurs de colonnes ou de lignes :

Bien que ce ne soit pas très joli, le balisage est très simple et vous pouvez changer les couleurs facilement. Pour l'effet de tableau « tartan », nous utilisons une couleur d'arrière-plan qui a une certaine transparence alpha, ainsi lorsque les couleurs de colonne (rouge) et de ligne (bleu) se rencontrent, une troisième couleur (violet) est produite.

Pour cet exemple, la valeur de la classe de table est "tartan" :

.tartan tr:nth-child(odd) {
    background: rgba(0,0,255,0.5);
}
.tartan td:nth-child(even) {
    background: rgba(255,0,0,0.5);
}

Si nous voulons positionner directement les cellules qui se croisent afin de pouvoir spécifier d'autres couleurs sans fond transparent, nous Vous pouvez également utiliser :

.tartan tr:nth-child(odd) td:nth-child(even) {
    background: #fff;
}

C'est pour les cellules impaires de toutes les lignes impaires et les cellules paires des lignes paires du tableau :

<.>

Dans les styles ci-dessus, vous devriez remarquer que nous utilisons la méthode d'abréviation des nombres impairs et pairs, ce qui facilite la mémorisation.

Résumé : ce qui précède est l'introduction complète à l'utilisation de la pseudo-classe nth-child() dans cet article. Vous pouvez utiliser la pseudo-classe nth-child() vous-même pour obtenir des effets et approfondir votre compréhension. . J'espère que cela pourra aider tout le monde à apprendre les aides.

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!