• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

互联网 diligentman 1周前 (02-19) 8次浏览

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

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试


喜欢 (0)