码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-06-14 18:41:44      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:元素   class   个人   --   div   lis   ...   cti   font   

 

 <ul class="active_M_list">
      <li>
          <img src="" alt="">
          <p>豪门盛宴奖多多,万元大奖等你来拿</p>
          <p>创建时间:2017-06-24 16:33</p>
          <p>区间:01-26 00:00----01-30 00:00</p>
          <p><span>排序: 0</span> <span>管理员: admin</span></p>
          <p>
             <span class="edit_btn" id="edit_btn">编辑</span>
             <span class="del_btn" id="del_btn">删除</span>
          </p>
      </li>
 </ul>

举例:

li p:nth-child(2) {

  ........

}

是指

技术分享图片

li p:nth-of-type(1) {

  .....

}

是指

技术分享图片

 

如果li 中都是同一类型的标签,nth-child(n)则是指第n个子元素

如果li 中不是同一类型的标签,nth-child(n)则是指 [父元素]的第n个[子元素],不区分标签

p:nth-child(n) 是指在父元素中的第n个元素,只是数量

p:nth-of-type(n) 是 [指指定元素]在父元素中属于第几个

个人见解。欢迎指正

 

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

标签:元素   class   个人   --   div   lis   ...   cti   font   

原文地址:https://www.cnblogs.com/zerozq/p/9183425.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!