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

haizhilin2013
2019-08-18 04:35:45 星期日
css
                    
                        
举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同?
Comments per page
< Page 1 / 1 >
Joan428 2019-08-18 01:46:58
<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 2019-08-18 16:24:04

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

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

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

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

学习不打烊,充电加油只为遇到更好的自己,365天无节假日,每天早上5点纯手工发布前端知识点(死磕自己,愉悦大家)。希望大家在这浮夸的前端圈里,保持冷静,坚持每天花20分钟来学习与思考。在这千变万化,类库层出不穷的前端,建议大家不要等到找工作时,才狂刷题,提倡每日学习!欢迎大家关注3+1开源项目!希望大家每人去学习与思考!(不要为了谁而来,要为自己而努力!

【关注官方公众号】 每天4:30-5:00推送
【公众号推荐】 一起折腾前端算法
【微信学习群】 备注3+1