伪类选择器:nth-of-type和:nth-child

发表于 | 分类于 |
字数统计: 146 | 阅读时长 ≈ 1

E:nth-of-type(n)匹配的是同类型中的第n个同级兄弟元素E

E:nth-child(n)匹配的是父元素中的第n个子元素E

1
2
3
4
5
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
1
2
p:nth-child(2) /*匹配到第二个p*/
p:nth-of-type(2) /*匹配到第二个p*/
1
2
3
4
5
6
7
<div>
    <h1>555</h1>
    <h2>445</h2>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
1
2
p:nth-child(2) /*无法匹配到第二个p   因为其第二个子元素不是p*/
p:nth-of-type(2) /*匹配到第二个p*/