200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > [css] 举例说明伪类:nth-child :first-child与:first-of-type这三者有什么不同?

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

时间:2022-07-07 11:15:43

相关推荐

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

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

<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子元素就行。

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,

但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。