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

选择器 nth-child和 nth-of-type的区别

时间:2018-04-16 23:51:12      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:har   red   com   class   技术   分享   arp   alt   显示   


<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>

  li:nth-child(2) {

             color:red;

         }

技术分享图片

选择器: 

li:nth-of-type(2){

     color:red;

    }

显示的效果

技术分享图片

 

这个时候  li:nth-child(2) 与  li:nth-of-type(2) 选择的是同一个 显示的效果是一样的

 

但............

技术分享图片

技术分享图片

技术分享图片

 

 技术分享图片因为没有选择到任何东西,所有这个时候 li:nth-child(2)  失效了 

 

 

技术分享图片

 

 技术分享图片   选择是的 第二个li 元素   这个时候就看出来 nth-child 与 nth-of-type  这两个选择器的区别了 

 

选择器 nth-child和 nth-of-type的区别

标签:har   red   com   class   技术   分享   arp   alt   显示   

原文地址:https://www.cnblogs.com/agansj/p/8859023.html

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