CSS3: nth-child () sélecteur
Sélecteurs CSS manuel de référence complet
Exemples
Spécifiez chaque élément de p correspond à la couleur de l'élément parent du deuxième sous-élément de fond:
p:nth-child(2)
{
background:#ff0000;
}
{
background:#ff0000;
}
Essayez »
Définition et utilisation
: Nth-enfant (n) sélecteur correspondant élément parent n ième élément.
npeut être un nombre, un mot - clé ou une formule.
Astuce: Voir sélecteur .Le sélecteur correspond au même type des frères et sœurs frères et sœurs de n-ième.
support du navigateur
Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.
选择器 | |||||
---|---|---|---|---|---|
:nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
D'autres exemples
exemple 1
<P impaire et même peut être utilisé comme un mot-clé pour correspondre à la sous-élément est utilisé, son indice est impair ou pair (l'indice du premier enfant est de 1). Ici, nous spécifions deux couleurs de fond différentes pour les éléments impairs et pairs p:
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
Essayez »
exemple 2
En utilisant la formule (un + b) Description: La taille d'un représentant d'un cycle, N est un compteur (commençant à 0), et b est le décalage. Ici, nous sommes tous les indices multiples de trois élément p spécifie la couleur de fond:
p:nth-child(3n+0)
{
background:#ff0000;
}
{
background:#ff0000;
}
Essayez »