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>