zoukankan      html  css  js  c++  java
  • css3之nth-child和nth-of-type的区别

    之前一直开发的是兼容老版本的代码,所以很少用到有关c3里面的代码格式,
    今天就对于使用的c3选择器中nth-child和nth-of-type做一个区分。
    首先:
    1.nth-child(n):是选择父级元素下对应位置的对应子元素,n是代表第几个。
    2.nth-of-type(n):是选择父级元素下对应的元素的第几个,n代表第几个。
    是不是在第一次没看懂这两句话的含义?那么这么写在结合一下你就会恍然大悟。
    <div>
    <h1>1111</h1>
    <p>2222</p>
    <p>3333</p>
    </div>
    同样对于去选中第一个P元素。他们的代码却是这样的
    p:nth-child(2);
    p:nth-of-type(1);
    这就明白了把。
    p:nth-child(n)的n是取决于第n个位置必须出现的p元素,再能被选中

    p:nth-of-type(n)是取决于父级下面的p元素,的第n个。

  • 相关阅读:
    Ugly Numbers
    Present
    Out of Hay
    Stars(树状数组或线段树)
    Humble Numbers
    Wireless Network
    Rank List
    Argus
    食物链
    Antenna Placement
  • 原文地址:https://www.cnblogs.com/wymbk/p/8657842.html
Copyright © 2011-2022 走看看