nth-of-type和nth-child的理解

一、nth-of-type

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nth-of-type与nth-child的区别</title>
	<style>
		p:nth-child(3){
			color: red;
		}
	</style>
	</head>
	<body>
		<p>这是p标签1</p>
		<p>这是p标签2</p>
		<p>这是p标签3</p>
		<p>这是p标签4</p>
		<span>这是span标签1</span>
		<span>这是span标签2</span>
		<span>这是span标签3</span>
	</body>
</html>

nth-child:该选择器选择父元素标签下面的第几个子元素(只要符合父元素的选择器要求)
效果
在这里插入图片描述
二、nth-of-type

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nth-of-type与nth-child的区别</title>
	<style>
		/* p:nth-child(5){
			color: red;
		} */
		.item:nth-of-type(3){
			color: red;
		}
	</style>
	</head>
	<body>
		<p class="item">这是p标签1</p>
		<p class="item">这是p标签2</p>
		<p class="item">这是p标签3</p>
		<p>这是p标签4</p>
		<span class="item">这是span标签1</span>
		<span class="item" >这是span标签2</span>
		<span class="item">这是span标签3</span>
	</body>
</html>

上面的列子是同为class为item的第三个元素,不管是p标签还是span标签,只要他们都有class等于item的类名,就都可以显示红色
效果
在这里插入图片描述
列子二:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nth-of-type与nth-child的区别</title>
	<style>
		/* p:nth-child(3){
			color: red;
		} */
		/* .item:nth-of-type(3){
			color: red;
		} */
		p:nth-of-type(1),p:nth-of-type(3){
			color: red;
		}
	</style>
	</head>
	<body>
		<p class="item">这是p标签1</p>
		<p class="item">这是p标签2</p>
		<p class="item">这是p标签3</p>
		<p>这是p标签4</p>
		<span class="item">这是span标签1</span>
		<span class="item" >这是span标签2</span>
		<span class="item">这是span标签3</span>
	</body>
</html>

效果:
在这里插入图片描述
nth-of-type(n)选择器,选择器选取父元素的第n个指定类型的子元素,按照类型来选择
还有一种情况:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nth-of-type与nth-child的区别</title>
	<style>
		/* p:nth-child(3){
			color: red;
		} */
		/* .item:nth-of-type(3){
			color: red;
		} */
		/* p:nth-of-type(1),p:nth-of-type(3){
			color: red;
		} */
		p:nth-child(3n+1){
			color: red;
		}
	</style>
	</head>
	<body>
		<h1>大标题</h1>
		<p>这是p标签1</p>
		<p>这是p标签2</p>
		<p>这是p标签3</p>
		<p>这是p标签4</p>
		<!-- <span class="item">这是span标签1</span>
		<span class="item" >这是span标签2</span>
		<span class="item">这是span标签3</span> -->
	</body>
</html>

效果:
在这里插入图片描述
我试的效果并没有像网上说的那个,H1大标签页显示红色???网上说大标签会显示红色,不应该不显示吗??
p:nth-child(3n+1) : n标签自然数从0开始,表示第1、第4、第7…
nth-of-type(3n+1)

	p:nth-of-type(3n+1){
			color: red;
		}
	</style>
	</head>
	<body>
		<h1>大标题</h1>
		<p>这是p标签1</p>
		<p>这是p标签2</p>
		<p>这是p标签3</p>
		<p>这是p标签4</p>
		<!-- <span class="item">这是span标签1</span>
		<span class="item" >这是span标签2</span>
		<span class="item">这是span标签3</span> -->
	</body>

效果
在这里插入图片描述
nth-child(n) n的参数可以说odd(偶数)even(奇数)
列子:

p:nth-child(odd){
			color: red;
		}
	</style>
	</head>
	<body>
		<h1>大标题</h1>
		<p>这是p标签1</p>
		<p>这是p标签2</p>
		<p>这是p标签3</p>
		<p>这是p标签4</p>
		<!-- <span class="item">这是span标签1</span>
		<span class="item" >这是span标签2</span>
		<span class="item">这是span标签3</span> -->
	</body>
</html>

效果:
在这里插入图片描述
nth-child(even) 奇数
例子:

	p:nth-child(even){
			color: red;
		}
	</style>
	</head>
	<body>
		<h1>大标题</h1>
		<p>这是p标签1</p>
		<p>这是p标签2</p>
		<p>这是p标签3</p>
		<p>这是p标签4</p>
		<!-- <span class="item">这是span标签1</span>
		<span class="item" >这是span标签2</span>
		<span class="item">这是span标签3</span> -->
	</body>

效果
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值