nth-of-type和nth-child
作者:陆金龙
发表时间:2023-02-04 07:58
关键词:
nth-of-type是css3的一个结构性伪类选择器,匹配同类型中的第n个同级兄弟元素。
nth-of-type(n)用于匹配父元素下使用同种标签的第n项子元素。标签名+nth-of-type是一种常规的使用模式。
nth-child(n)用于匹配父元素下的第n项子元素。
示例:
<style>
p:nth-of-type(3) {
background: red;
}
p:nth-child(3) {
background: yellow;
}
</style>
<div >
<p>one</p>
<div>我是div</div>
<p>two</p>
<p>three</p>
<p>four</p>
<p>five</p>
<p>six</p>
</div>