首页 > 其他 > 详细

nth-child和:nth-of-type的区别

时间:2017-06-11 00:46:51      阅读:356      评论:0      收藏:0      [点我收藏+]

:nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素, 

ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。 

例:

 

<div class="box"> 

    <div>1</div> 

  <p>1</p> 

  <p>2</p>
</div> 

 

.box p:nth-child(1){

  color:red;  //选择失败,因为.box下面的第一个子元素不是p

}

.box p:nth-child(2){

  color:red;  //选择的元素是<p>1</p> 

}

.box p:nth-child(3){

  color:red;  //选择的元素是<p>2</p> 

}

.box p:nth-of-type(1){

  color:red;  //选择的元素是<p>1</p> 

}

nth-child和:nth-of-type的区别

原文:http://www.cnblogs.com/olive1209/p/6980432.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!