前端技术学习之选择器（八）

九，:nth-of-type(n)

又一个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)一样。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容