:nth-of-type()

版本：CSS3

:nth-of-type()这个 CSS 伪类，是针对具有一组兄弟节点的标签，用 n 来筛选出在一组兄弟节点的位置。

语法:

• :nth-of-type()伪类指定一个实际参数，这个参数使用一种模式来匹配哪些元素应该被选中。
• :nth-of-type()这个CSS 伪类匹配文档树中在其之前具有an+b-1个相同兄弟节点的元素，其中 n 为正值或零值。简单点说就是，这个选择器匹配那些在相同兄弟节点中的位置与模式an+b匹配的相同元素。
• E元素是某个元素的子元素，E的父元素最高是，即E可以是的子元素，也就是说E可以是
• 该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E

:nth-of-type()与:nth-child()

第1个p
第2个p
第1个span
第3个p
第2个span

如上HTML，假设要命中第一个span

使用:nth-of-type()span:nth-of-type(1){color:#f00;}。如果使用:nth-child()span:nth-child(3){color:#f00;}

浏览器支持

示例

//HTML 
 
这段不参与计数。
 
这是第一段。
 
这是第二段。
 
这段不参与计数。
 
这是第三段。
 
这是第四段。
//CSS

/* 奇数段 */
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-last-of-type(2)
{
background:pink;
} 
元素1
元素2
元素3
元素4

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com