Web速查-索引

:nth-of-type(n)

定义

:nth-of-type(n) 选择器匹配属于父元素的指定类型的第 n 个子元素。

注意:n 可以是数字、关键词或公式。

语法

:nth-of-type(number)
{
CSS 样式
}

实例

基础n

:nth-of-type(n):选中某个元素,该元素必须是某个父元素下的第n个子元素;

p:nth-of-type(n) :选中p元素,且该p元素必须是某个父元素下的第n个子元素

注意:n是从父元素最后一位开始,从1算起。

如下代码:

p:nth-of-type(2)

选中两个div中的倒数第二个子元素p,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NTHOME-零基础入门学习Web(HTML5+CSS3)</title>
<style>
p:nth-of-type(1)
{
color:green;
}
</style>
</head>
<body>
<div style="border:1px solid;width: 222px">
<span>div1 中span</span>
<p>div1 中第一个段落。</p>
<p>div1 中第二个段落。</p>
<p>div1 中的最后一个段落。</p>
</div><br>
<div style="border:1px solid;width: 222px">
<p>div2 中第一个段落。</p>
<p>div2 中第二个段落。</p>
<p>div2 中的最后一个段落。</p>
</div>
</body>
</html>
div1 中span

div1 中第一个段落。

div1 中第二个段落。

div1 中的最后一个段落。


div2 中第一个段落。

div2 中第二个段落。

div2 中的最后一个段落。

正方向范围

li:nth-of-type(n+6)

选中从第6个开始的子元素

负方向范围

li:nth-of-type(-n+9)

选中从第1个到第9个子元素中的所有元素。

前后限制范围

:nth-of-type(n+4):nth-of-type(-n+8)

选中第4-8个子元素间的所有元素。

奇数、偶数位

/*奇数*/
:nth-of-type(odd)
/*偶数*/
:nth-of-type(even)

高级玩法

隔选择子元素

:nth-of-type(3n+1),

选择1,4,7,10子元素。

范围法

:nth-of-type(n+1):nth-of-type(odd):nth-of-type(-n+5)

将会选中的子元素是从第1位到第5位,并且只包含奇数位。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号

Safari Chrome FireFox IE
1.0 1.0 1.0 5.0