:nth-of-type()
版本： CSS3
:nth-of-type()
这个 CSS 伪类，是针对具有一组兄弟节点的标签，用 n 来筛选出在一组兄弟节点的位置。
语法:
E : nth-of-type (n ){ sRules }
-
:nth-of-type()伪类指定一个实际参数，这个参数使用一种模式来匹配哪些元素应该被选中。 -
:nth-of-type()这个CSS 伪类匹配文档树中在其之前具有 an+b-1 个相同兄弟节点的元素，其中 n 为正值或零值。简单点说就是，这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素。 -
E元素是某个元素的子元素，E的父元素最高是
<html>，即E可以是<html>的子元素，也就是说E可以是<body> -
该选择符总是能命中父元素的第
n 个为E的子元素，不论第n 个子元素是否为E
:nth-of-type()与:nth-child()
<p>第1个p</p> <p>第2个p</p> <span>第1个span</sapn> <p>第3个p</p> <span>第2个span</sapn>
如上HTML，假设要命中第一个 span
使用
:nth-of-type()
span:nth-of-type(1){color:#f00;}
。如果使用
:nth-child()
span:nth-child(3){color:#f00;}
浏览器支持
|
|
|
|
|
IE9+以及新版浏览器都支持
:nth-of-type()
|
||||
示例
//HTML
<div>
<div>这段不参与计数。</div>
<p>这是第一段。</p>
<p>这是第二段。</p>
<div>这段不参与计数。</div>
<p>这是第三段。</p>
<p>这是第四段。</p>
</div>
//CSS
/* 奇数段 */
p:nth-of-type(2n+1) {
color: red;
}
/* 偶数段 */
p:nth-of-type(2n) {
color: blue;
}
/* 第一段 */
p:nth-of-type(1) {
font-weight: bold;
}
<style>
p:nth-last-of-type(2)
{
background:pink;
}
</style>
<h3>元素1</h3>
<p>元素2</p>
<p>元素3</p>
<p>元素4</p>
元素1
元素2
元素3
元素4