第124天 举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同?
Activity
Joan428 commentedon Aug 18, 2019
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 commentedon Aug 18, 2019
:nth-child(n): 选择当前元素的父元素下的第n个子元素(从1开始)
:nth-of-type(n): 选择当前元素的父元素下的第n个同类型子元素(从1开始)
:first-child: 相当于:nth-child(1)
:first-of-type: 相当于:nth-type(1)