English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

manual de referencia de CSS

CSS @reglas (RULES)

大全 de atributos de CSS

CSS3 :nth-of-type() 选择器

Manual de referencia de selector CSS completo

在线示例

指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色：

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Guía básica (oldtoolbag.com)</title>　
<style>　
/*　奇数段　*/
p:nth-of-type(2n+1) {
　　color: red;
}
/*　偶数段　*/
p:nth-of-type(2n) {
　　color: blue;
}
/*　第一段　*/
p:nth-of-type(1) {
　　font-weight: bold;
}
/*　第二段　*/
p:nth-of-type(2)
{
　　　　background:#ff0000;
}
</style>
</head>
<body>
<div>
　　<div>这段不参与计数。</div>
　　<p>Este es el primer párrafo。</p>
　　<p>Este es el segundo párrafo。</p>
　　<div>这段不参与计数。</div>
　　<p>Este es el tercer párrafo。</p>
　　<p>Este es el cuarto párrafo。</p>
</div>
</body>
</html>
Prueba aquí ‹/›

定义和用法

:nth-of-type( <nth> )
　where　
<nth> = <an-plus-b> | even | odd

:nth-of-El selector type(n) coincide con el elemento hermano de tipo同级 en el orden de aparición.

n puede ser un número, una palabra clave o una fórmula.

Consejo: Vea también :nth-child() selector. Este selector coincide con el elemento hijo número n del elemento padre. Mire aquí :nth-child() 。

Compatibilidad del navegador

Los números en la tabla representan la versión del primer navegador que admite la propiedad.

selector




:nth-of-type()4.09.03.53.29.6

Ejemplo 1

Los números pares e impares pueden usarse como palabras clave para coincidir con los elementos hijos, cuyos índices son pares o impares (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>Guía básica (oldtoolbag.com)</title>　
<style>　
p:nth-of-type(odd)
{
　　　background:#ff0000;
}
p:nth-of-type(even)
{
　　　background:#0000ff;
}
</style>
</head>
<body>
<div>
　　<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>
</div>
</body>
</html>
Prueba aquí ‹/›

Ejemplo 2

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 el color de fondo para todos los índices3del elemento p que multiplica el número especificado:

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Guía básica (oldtoolbag.com)</title>　
<style>　
p:nth-of-type(3n+0)
{
　　　　background:#ff0000;
}
</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-último-selector de child().</p>
</body>
</html>
Prueba aquí ‹/›

Manual de referencia de selector CSS completo

Funciones CSS (Functions)Manual completo de selectores CSS