又一个of-type,看到这里应该就明白了,这个:nth-of-type(n)是对:nth-child(n)选择器的扩展,只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不是同一种类型的子元素时,使用:nth-of-type(n)选择器来匹配父元素中特定类型的子元素就很方便了。
举例:设置偶数个段落背景色为橙色
代码例子:
属性选择器
.wrapper>p:nth-of-type(2){
background-color:orange;
}
我是一个Div元素
我是一个段落元素
我是一个Div元素
我是一个段落
我是一个Div元素
我是一个段落
我是一个Div元素
我是一个段落
我是一个Div元素
我是一个段落
我是一个Div元素
我是一个段落
我是一个Div元素
我是一个段落
我是一个Div元素
我是一个段落
运行效果:
注:nth-last-of-type(n)和:nth-of-type(n)选择器一样是选择父元素中指定的某种子元素类型,但它的起始方向是从最后一个子元素开始,使用方法同:nth-last-child(n)一样。