:nth-child() 与 :nth-of-type(n)的区别
<!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: 18px;
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>
该文章参考
