zoukankan      html  css  js  c++  java
  • CSS3中:nth-child和:nth-of-type的区别深入理解

    关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3,才发现里面其实暗藏玄机。

    :nth-child可以选择父元素下的字元素,:nth-of-type也可以。但是它们到底有什么区别呢?

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

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

    这里附上一个小例子:

     1 代码如下:
     2 
     3  
     4 <div> 
     5 <ul class="demo"> 
     6 <p>zero</p> 
     7 <li>one</li> 
     8 <li>two</li> 
     9 </ul> 
    10 </div> 


    上面这个例子,.demo li:nth-child(2)选择的是<li>one</li>节点,而.demo li:nth-of-type(2)则选择的是<li>two</li>节点。

    现在应该明白他们的区别了吧!!

  • 相关阅读:
    Node.js 0.12: 正确发送HTTP POST请求
    pm2 常用命令
    IntelliJ IDEA Configuring projects
    socket.io入门整理教程
    幂等函数
    Linux 下 ps 命令
    Linux 下 tail 命令
    Linux下chmod命令
    Linux下ll命令与ls -l
    Thrift——初学
  • 原文地址:https://www.cnblogs.com/kingchan/p/5964294.html
Copyright © 2011-2022 走看看