:nth-child() 与 :nth-of-type(n)的区别

佚名 7年前 (2019-04-12) 随笔 694人围观抢沙发百度已收录

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.uls > li{
			width: 100px;
			line-height: 25px;
		}
		.uls >li:nth-child(1){
			background: pink;
		}
		.uls >li:nth-child(2n){
			/*2n的倍数变色，可以写3n，4n等*/
			background: red;
		}
		.uls >li:nth-child(odd){
			/*奇数的倍数变色*/
			color:blue;
		}
		.uls >li:nth-child(even){
			/*偶数字体变大*/
			font-size: 14px;
			color: #fff;
		}
		.uls >li:nth-child(4n+1){
			/*4n+1的背景色*/
			background: #000;
			opacity: .8;
			filter: alpha(opacity=80)
			
		}
		.cs2 >li{
			width: 100px;
		}
		.cs2 >li:nth-of-type(2n){
			color: pink;
		}
/* 区别 */
		.box{
				width: 50%;margin: auto;
			}
			ul,li{list-style: none;}
			.box div,p{
				border: 1px solid #008000;height: 30px;line-height:30px;text-indent: 10px;
			}
			.box div{
				margin: 10px auto;
			}
	
	/*：nth-child*/
	.box :nth-child(2n){
		background: red;
		color: #fff;
	}
	/*nth-of-type 在不指定类型时，nth-child(n)选中的是父元素下的第n个子元素；nth-of-type(n)选中的是父元素下的不同类型标签的第n个*/
	.box :nth-of-type(2){
		background: pink;
	}
	</style>
</head>
<body>
	css3样式
<div>
	<ul class="uls">
		<li>黄色</li>
		<li>黄色</li>
		<li>黑色</li>
		<li>蓝色</li>
		<li>白色</li>
		<li>紫色</li>
		<li>灰色</li>
	</ul>
	<ul class="cs2">
		<li>111</li>
		<li>22</li>
		<li>333</li>
		<li>444</li>
	</ul>
</div>	
<!-- nth-child与nth-of-type的区别 -->
<h4> nth-child与nth-of-type的区别</h4>
<div class="box">
	<p>ppp</p>
	<p>ppp</p>
	<div>div</div>
	<div>div</div>
	<article>article</article>
	<div>div</div>
	<div>div</div>
	<div>div</div>
	<ul>
		<li>ul中的li标签</li>
		<li>ul中的li2标签</li>
	</ul>
	<p><span>p标签里面的span标签</span></p>
	<span>span</span>
</div>

</body>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
	
</script>
</html>

该文章参考

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。