English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-child) le sélecteur+child) ce pseudo-classe CSS :nth1commencez à trier, le résultat du choix est le pseudo-classe CSS :nth-child) l'expression entre les parenthèses (an+b) l'ensemble des éléments correspondants (n=0,1,2,3...). Exemple :
0n+3 ou simplement 3 correspond à l'élément troisième.
1n+0 ou simplement n correspondent à chaque élément. (Avis de compatibilité : dans les navigateurs Android 4.3 Les versions suivantes de n et 1n ne correspondent pas de la même manière.1n et 1n+0 est cohérent et vous pouvez choisir l'un ou l'autre selon votre préférence).
2n+0 ou simplement 2n correspondant à la position 2、4、6、8... des éléments (n=0,2n+0=0, l'élément zéro n'existe pas car il est à partir de1commencez à trier). Vous pouvez utiliser le mot-clé even pour remplacer cette expression.
2n+1 correspondant à la position 1、3、5、7... des éléments. Vous pouvez utiliser le mot-clé odd pour remplacer cette expression.
3n+4 correspondant à la position 4、7、10、13... des éléments.
a et b doivent être des entiers, et l'index du premier élément fils est 1. Autrement dit, cette pseudo-classe correspond à tous les éléments de l'ensemble { an + b; n = 0, 1, 2, ...} des éléments fils. Il est particulièrement important de noter que an doit être écrit avant b, et non l'inverse.+an sous forme.
Guide complet des sélecteurs CSS
spécifie le nème élément fils correspondant à chaque élément p du parent 2 la couleur de fond d'un élément fils :
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Base tutorial(oldtoolbag.com)</title>
<style>
p:nth-child(2)
{
background:orange;
}
</style>
</head>
<body>
<h1>C'est un titre</h1>
<p>C'est le premier paragraphe.</p>
<p>C'est le deuxième paragraphe.</p>
<p>C'est le troisième paragraphe.</p>
<p>C'est le quatrième paragraphe.</p>
<p><b>Attention :</b> Internet Explorer 8 Les navigateurs de versions plus anciennes ne supportent pas :nth-sélecteur child().</p>
</body>
</html>Voyons voir ‹/›:nth-Le sélecteur child(n) correspond à l'élément fils nème du parent, sans restriction sur le type d'élément.
n peut être un nombre, un mot-clé ou une formule.
Avis: Voir égalementsélecteur. Ce sélecteur correspond au nème élément frère de même type.
tr:nth-child(2n+1)
représente les lignes impaires d'un tableau HTML.
tr:nth-child(odd)
représente les lignes impaires d'un tableau HTML.
tr:nth-child(2n)
représente les lignes paires d'un tableau HTML.
tr:nth-child(even)
représente les lignes paires d'un tableau HTML.
span:nth-child(0n+1)
représente l'élément premier et de type span dans les éléments fils, similaire à :first-Le sélecteur child a le même effet.
span:nth-child(1)
représente que le tag span est sélectionné comme premier enfant de l'élément parent et a le nom span
span:nth-child(-n+3)
Correspond aux éléments span des trois premiers éléments enfants.
Les nombres dans le tableau indiquent la version du premier navigateur prenant en charge cette propriété.
| sélecteur | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Pair et impair peuvent être utilisés comme mots-clés pour correspondre aux éléments enfants, dont l'index est pair ou impair (le premier enfant de l'index est1) Ici, nous définissons deux couleurs de fond différentes pour les éléments p pairs et impairs :
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Base tutorial(oldtoolbag.com)</title>
<style>
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<h1>C'est un titre</h1>
<p>C'est le premier paragraphe.</p>
<p>C'est le deuxième paragraphe.</p>
<p>C'est le troisième paragraphe.</p>
<p>C'est le quatrième paragraphe.</p>
<p><b>Attention :</b> Internet Explorer 8 Les navigateurs de versions plus anciennes ne supportent pas :nth-sélecteur child().</p>
</body>
</html>Voyons voir ‹/›Utilisez l'équation (an+ b). Description : a représente la taille d'une boucle, N est un compteur (commençant à 0), et b est un décalage. Ici, nous définissons la couleur de fond pour tous les indices3Des éléments p de multiples spécifient la couleur de fond :
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Base tutorial(oldtoolbag.com)</title>
<style>
p:nth-child(3n+0)
{
background:orange;
}
</style>
</head>
<body>
<h1>C'est un titre</h1>
<p>Le premier paragraphe.</p>
<p>Le deuxième paragraphe.</p>
<p>Le troisième paragraphe.</p>
<p>Le quatrième paragraphe.</p>
<p>Le cinquième paragraphe.</p>
<p>Le sixième paragraphe.</p>
<p>Le septième paragraphe.</p>
<p>Le huitième paragraphe.</p>
<p>Le neuvième paragraphe.</p>
<p><b>Attention :</b> Internet Explorer 8 Les navigateurs de versions plus anciennes ne supportent pas :nth-sélecteur child().</p>
</body>
</html>Voyons voir ‹/›