:nth-child、:nth-of-type 、:first-child与:first-of-type这四者异同？

最新推荐文章于 2024-04-03 12:12:42 发布

bangleilei

最新推荐文章于 2024-04-03 12:12:42 发布

阅读量210

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/banglei123/article/details/113876086

版权

<body>
    <div>
        <p>大儿子</p>
        <div>二儿子</div>
        <p>三儿子</p>
    </div>
    <p>二叔</p>
    <div>三叔<div>
</body>

p:first-child 选中父元素里的第一个p元素；（大儿子被选中，二叔没有被选中，因为它不是父元素里的第一个元素）
p:first-of-type 选中第一个类型为p的子元素（大儿子、二叔被选中，因为大儿子是父元素div的第一个p元素，二叔是body的一个p元素）

<div>
        <p class="item">大儿子</p>
        <div class="item">二儿子</div>
        <p class="item">三儿子</p>
		<p class="item">四儿子</p>
		<div class="item">五儿子</div>
    </div>
    <p class="item">二叔</p>
	<p class="item">三叔</p>
    <div class="item">四叔<div>
	
	
	<style>
		/* 1、:nth-child(n) 当前元素的父级的第n个元素 && 是当前元素 */
		p:nth-child(3){ /* 四儿子 和 三叔*/
			color:yellow;
		} 

		
		/* 2.1、 p:nth-of-type(n) 当前p 的父级下的第n个p元素 */
		p:nth-of-type(1){ /*  选中 大儿子和 二叔*/
			color:red
		}
		p:nth-of-type(2){ /*  选中 三儿子*/
			color:red
		}
		p:nth-of-type(3){ /*  选中 无*/
			color:red
		}


		/* 2.2、.item:nth-of-type(n) 当前.item的父级下的第n个.item  注意:item的tagName改变会重复计算 */
		.item:nth-of-type(2){ /*  选中 三儿子 五儿子 三叔 四叔*/
			color:blue;
		}
	</style>

bangleilei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
:nth-child、:nth-of-type 、:first-child与:first-of-type这四者异同？

<body> <div> <p>大儿子</p> <div>二儿子</div> <p>三儿子</p> </div> <p>二叔</p> <div>三叔<div></body>div:nth-child(2) 选中父元素里的第二个子元素div；（即二儿子被选中.
复制链接

扫一扫