Skip to content

[css] 第124天 举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同? #1079

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第124天 举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同?

Activity

Joan428

Joan428 commented on Aug 18, 2019

@Joan428
<div>
<p>大儿子</p>
<div>二儿子</div>
<p>三儿子</p>
</div>
<p>二叔</p>
<div>三叔<div>

div:nth-child(2) 选中父元素里的第二个子元素div;(即二儿子被选中)
p:first-child 选中父元素里的第一个p元素;(大儿子被选中,二叔没有被选中,因为它不是父元素里的第一个元素)
p:first-of-type 选中第一个类型为p的子元素(大儿子、二叔被选中,因为大儿子是父元素div的第一个p元素,二叔是body的一个p元素)
:nth-child(n)和:first-child 是强调父元素里的第n个xx子元素,首先是第n个,然后才是xx类型;:first-of-type 主要强调类型,即一个父元素里,无论我们想选中的那个元素前面有多少个同级元素,都不算,只要找到父元素里的第一个xx子元素就行。

EmiyaYang

EmiyaYang commented on Aug 18, 2019

@EmiyaYang

:nth-child(n): 选择当前元素的父元素下的第n个子元素(从1开始)

:nth-of-type(n): 选择当前元素的父元素下的第n个同类型子元素(从1开始)

:first-child: 相当于:nth-child(1)

:first-of-type: 相当于:nth-type(1)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@EmiyaYang@Joan428

        Issue actions

          [css] 第124天 举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同? · Issue #1079 · haizlin/fe-interview