English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-Selector child()+child(an1Comienza a clasificar, y el resultado seleccionado es el pseudoclase CSS:nth-La expresión en los corchetes de child(an+La colección de elementos coincidentes (n=0,1,2,3...). Ejemplo:
0n+3 o simplemente 3 Coincide con el tercer elemento.
1n+0 o simplemente n coinciden con cada elemento. (Recordatorio de compatibilidad: en el navegador Android, 4.3 Las versiones de 1La forma de coincidir n y1n y 1n+0 es consistente y puede elegirse según el gusto.)
2n+0 o simplemente 2n coincide con la posición de 2,4,6,8... de los elementos (cuando n=0,2n+0=0, el primer elemento no existe porque se comienza desde1comienzo de la clasificación). Puede usar la palabra clave even para reemplazar esta expresión.
2n+1 Coincide con la posición de 1,3,5,7... de los elementos. Puede usar la palabra clave odd para reemplazar esta expresión.
3n+4 Coincide con la posición de 4,7,10,13... de los elementos. También se puede usar el carácter de puntuación, ...
ambos a y b deben ser enteros, y el índice del primer elemento hijo es 1. En otras palabras, esta pseudoclase coincide con todos los elementos en el conjunto { an + b; n = 0, 1, 2, ...} de los elementos hijos. Además, debe prestarse atención especial a que an debe escribirse antes de b, no puede escribirse como b+en forma de an.
Manual de referencias de selectores CSS completos
Especifique el elemento padre del que coincide cada elemento p en el que 2 Color de fondo de un elemento hijo:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
<style>
p:nth-child(2)
{
background:orange;
}
</style>
</head>
<body>
<h1>Este es un título</h1>
<p>Este es el primer párrafo.</p>
<p>Este es el segundo párrafo.</p>
<p>Este es el tercer párrafo.</p>
<p>Este es el cuarto párrafo.</p>
<p><b>Nota:</b> Internet Explorer 8 Los navegadores de versiones anteriores no admiten :nth-selector child().</p>
</body>
</html>Prueba y mira ‹/›:nth-El selector child(n) coincide con el elemento hijo n en el elemento padre, sin restricción de tipo de elemento.
n Puede ser un número, un nombre o una fórmula.
Aviso: Vea tambiénselector. Este selector coincide con el elemento hermano de igual tipo en la posición n.
tr:nth-child(2n+1)
Representa las filas impares de una tabla HTML.
tr:nth-child(odd)
Representa las filas impares de una tabla HTML.
tr:nth-child(2n)
Representa las filas pares de una tabla HTML.
tr:nth-child(even)
Representa las filas pares de una tabla HTML.
span:nth-child(0n+1)
Representa el primer elemento de los hijos que es de tipo span, equivalente a :first-El selector child tiene el mismo efecto.
span:nth-child(1)
indica que se selecciona la etiqueta span que es el primer elemento hijo del elemento padre y tiene el nombre span
span:nth-child(-n+3)
Coincide con el elemento span de los tres primeros elementos hijos.
Los números en la tabla representan la versión del primer navegador que admite la propiedad.
| selector | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Los números impares y pares pueden usarse como palabras clave para coincidir con los elementos hijos, cuyos índices son impares o pares (el primer nodo hijo es1) Aquí, especificamos dos colores de fondo diferentes para los elementos p pares e impares:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
<style>
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<h1>Este es un título</h1>
<p>Este es el primer párrafo.</p>
<p>Este es el segundo párrafo.</p>
<p>Este es el tercer párrafo.</p>
<p>Este es el cuarto párrafo.</p>
<p><b>Nota:</b> Internet Explorer 8 Los navegadores de versiones anteriores no admiten :nth-selector child().</p>
</body>
</html>Prueba y mira ‹/›Usando la fórmula (an+ b). Descripción: a representa el tamaño de un ciclo, N es un contador (que comienza en 0) y b es el desplazamiento. Aquí, especificamos colores de fondo para todos los índices3del elemento p con un fondo de color especificado como múltiplo:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
<style>
p:nth-child(3n+0)
{
background:orange;
}
</style>
</head>
<body>
<h1>Este es el título</h1>
<p>El primer párrafo.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>El cuarto párrafo.</p>
<p>El quinto párrafo.</p>
<p>El sexto párrafo.</p>
<p>El séptimo párrafo.</p>
<p>El octavo párrafo.</p>
<p>El noveno párrafo.</p>
<p><b>Nota:</b> Internet Explorer 8 Los navegadores de versiones anteriores no admiten :nth-selector child().</p>
</body>
</html>Prueba y mira ‹/›