精华内容
下载资源
问答
  • 在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢?下面这篇文章主要就给介绍了CSS3中nth-childnth-of-type的区别,需要的朋友可以参考...
  • table tr th:nth-child(2) </style> <table> <tr> 第一个</th> 第二个</th> 第三个</th> </tr> </table> 定义: :nth-child(n) 选择器匹配属于其父元素(在这里就是tr)的第 N (这里选择第2个)个子元素...
  • 本文实例讲述了jQuery中:nth-child选择器用法。分享给大家供大家参考。具体分析如下: 此选择器匹配其父元素下的第N个子或奇偶元素。 :eq(index)选择器只匹配一个元素,而:nth-child选择器将为每一个父元素匹配子...
  • css3的强大,让人惊叹,今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”实现奇偶行显示不同样式,具体的详细示例可以参考下文,希望对大家有所帮助
  • 主要介绍了详解CSS nth-childnth-of-type的元素查找方式的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • :nth-child(index)子元素过滤选择器的描述是:选取每个父元素下的弟index个子元素,index从1开始。
  • CSS-nth-child-源码

    2021-03-26 04:44:50
    CSS-nth-child
  • 本篇文章主要介绍了CSS3选择器:nth-child和:nth-of-type之间的差异,非常具有实用价值,需要的朋友可以参考下
  • 但两者是存在差异的 :nth-child 选择器,在此例子中意思就是指 1.首先是个p元素 2.其次这个p元素是其父元素的第二个孩子 :nth-of-type 选择器,在此例子中意思就是指 1.定位一个父元素下的第二个p元素 :nth-of-type
  • 主要介绍了IE8下CSS3选择器nth-child() 不兼容问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3,才发现里面其实暗藏玄机。 :nth-child可以选择父元素下的字元素,:nth-of-type也可以。但是它们到底有什么区别呢? 其实区别很...
  • CSS中的nth-child()属性

    2021-10-27 11:18:26
    first-child、last-childnth-childnth-last-childnth-of-type first-child,last-child可直接使用,例如 ul li:first-child,ul li:last-child, 但是其余的选择都需要在后面加入(),例如ul li:nth-child(n)...

    目录

    first-child、last-child、nth-child、nth-last-child、nth-of-type

    1.first-child

    2.margin属性解释拓展

    2.1.写一个值

    2.2. 写两个值

    2.3.写三个值

     2.4.写四个值    

    3.回归正题,看nth-child的使用方法

    3.1、li:first-child:       

    3.2.li:last-child:             

    3.3.li:nth-child(n):       

    3.4.li:nth-child(odd);li:nth-child(2n+1)       

    3.5. li:nth-child(even);li:nth-child(2n) 或者li:nth-child(2n+2) 

    3.6.循环使用样式

    ​3.7.nth-of-type:

     3.8. nth-last-child(n):        

    3.9.正方向范围

    3.10.负方向范围

    3.11.前后限制范围

    3.12.nth-child的高级用法

    first-child、last-child、nth-child、nth-last-child、nth-of-type

    first-child,last-child可直接使用,例如  ul  li:first-child,ul li:last-child,

    但是其余的选择都需要在后面加入(),例如ul li:nth-child(n);    ->选中ul元素下面第n个li元素,且n是从1开始的,这里和JavaScript中的eq()不同,eq选择也是从第1个开始的,但是索引值是从0开始

    1.first-child

    <style>
        body {
            font-size: 16px;  //给body的所有元素设置字体大小
            color: #333;      //给body的所有元素设置字体颜色
        }
        *{
            padding: 0;      //这个里面的(*)表示选中所有元素, 这里给所有元素去除默认的外边距和内间距
            margin: 0;
        }
        .container {
            width: 1200px;    //设置容器的宽度为1200px;
            margin: 200px auto 0;    //给容器设置外边距:  上边距为200px,左右居中,下边距为0,
        }
        li {
            list-style: none;        //去除li标签默认的圆点样式,如需要保留可将none改为desc;
        }
        .container ul li {
            margin-bottom: 10px;
        }
    </style>

    2.margin属性解释拓展

    此处做一下margin的拓展:margin后面最少可以写一个值,最多四个,padding和这一样

    2.1.写一个值

    上间距、下间距、左间距、右间距均为这个值

    例如:margin: 100px; 

    2.2. 写两个值

    第一个代表上间距和下间距,第二个代表左间距和右间距

    例如:margin: 100px  200px; 

    2.3.写三个值

    第一个代表上间距,第二个代表左间距和右间距,第三个代表下间距

    例如:margin:  100px   200px   300px;

     2.4.写四个值    

    第一个代表上间距,第二个代表右间距,第三个代表下间距,第四个代表左间距,按照顺时针方向,可简称为上右下左

     

    3.回归正题,看nth-child的使用方法

    3.1、li:first-child:       

    表示选择的是第一个 

    例如

    .container ul li:first-child {
        background: red;
    }

     

    3.2.li:last-child:             

    表示选择的是最后一个

    .container ul li:last-child {
        background: red;
    }

     

    3.3.li:nth-child(n):       

    表示选择的第n个

    例如

    .container ul li:nth-child(3) {
        background: red;
    }

     3.4.li:nth-child(odd);li:nth-child(2n+1)       

    表示选中的是奇数

    例如

    .container ul li:nth-child(odd) {
        background: red;
    }

     

    .container ul li:nth-child(2n+1) {
        background: red;
    }
    

    3.5. li:nth-child(even);li:nth-child(2n) 或者li:nth-child(2n+2) 

    表示选中的是偶数

    例如

    .container ul li:nth-child(even) {
        background: red;
    }

    .container ul li:nth-child(2n) {
        background: red;
    }

    3.6.循环使用样式

    li:nth-child(3n+1)     

    每隔3个使用这个样式,(3n+1)也可理解为每3个分为一组,这一组中的第一个使用这个样式

    .container ul li:nth-child(3n+1) {
        background: red;
    }

    3.7.nth-of-type:

    只针对同类型的元素进行计算使用

    例如

    .container ul li:nth-of-type(3n+1) {
        background: red;
    }

     这里我们可以看到只是选中了li标签,并没有选中p标签;但是如果使用nth-child()的话,就会从第一个p标签开始进行匹配,而不是第一个li标签,此时第一个li标签成为了第6个,而且如果是p:nth-child(1)的话,样式也不会生效;此时要写的是li:nth-child(6);

    .container ul li:nth-child(6) {
        background: red;
    }

     

     3.8. nth-last-child(n):        

    表示选择的是倒数第n个

    .container ul li:nth-last-child(3) {
        background: red;
    }

    3.9.正方向范围

    li:nth-child(n+3)        从第3个开始使用这个样式

    .container ul li:nth-child(n+3) {
        background: red;
    }

     

    3.10.负方向范围

    li:nth-child(-n+3)        从第3个开始向前面数

    .container ul li:nth-child(-n+3) {
        background: red;
    }

    3.11.前后限制范围

    li:nth-child(n+4):nth-child(-n+8)        选中第4-8个子元素。使用 nth-child(n+4):nth-child(-n+8) 我们可以选中某一范围内子元素

    .container ul li:nth-child(n+4):nth-child(-n+8) {
        background: red;
    }

    3.12.nth-child的高级用法

    li:nth-child(n+2):nth-child(odd):nth-child(-n+9)   选中的子元素是从第2位到第9位,并且只包含奇数位

    .container ul li:nth-child(n+2):nth-child(odd):nth-child(-n+9) {
        background: red;
    }

    关于nth-child()的使用方法就写到这里了,如果觉得本文写的不错的话,请您关注,点赞,评论哦!!!

    点击这里,这是我在CSDN上面的仓库,不定期的会更新一些小练习,欢迎大家一起交流,学习,点个star哦

    展开全文
  • nth-childnth-of-type是比较常用的一个伪类选择器,过去一直没在意这个,今天发现原来他们之间还有这样的区别,记录一下。 我们首先来看MDN上对它们的解释: :nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素...

    nth-child和nth-of-type是比较常用的一个伪类选择器,过去一直没在意这个,今天发现原来他们之间还有这样的区别,记录一下。

    我们首先来看MDN上对它们的解释:

    :nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...)
    
    :nth-of-type(an+b) 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。
    

    注:注意不能使用b+an的形式,必须是an+b的形式,即n必须在最前面,n从0开始取值,为0,1,2…

    从上面的描述似乎不容易看出区别,我们用例子来说明:
    这是html结构,下面的css均是以这个html为基础

    <section>
       <div>我是1号div</div>
       <div>我是2号div</div>
       <div>我是3号div</div>
       <p>我是1号p</p>
       <p>我是2号p</p>
       <p>我是3号p</p>
    </section>
    <div>
       <span>我是1号span</span><span>我是2号span</span>
    </div>
    

    第一个例子:

    section div:nth-child(2) {
      color: red;
    }
    
    section div:nth-of-type(3) {
      color: blue;
    }
    

    在这里插入图片描述
    效果图1

    从上图可以看出他们都很好的选中了对应的元素,这里还看不出他们有什么区别。好的,我们再看第二个例子:

    section p:nth-child(2) {
    	color: red;
    }
    
    section p:nth-of-type(3) {
        color: blue;
    }
    

    在这里插入图片描述
    效果图2

    咦?为什么第二个p标签没有变色?为什么nth-child不起作用但是nth-of-type却可以呢?这里我们就需要理解这两者的原理了。浏览器在生成css渲染树的时候,对于选择器的处理是从右到左的(关于原因可以看我的笔记)。那么对于section p:nth-child(2),首先浏览器会在dom树中寻找所有子元素,将他们一一排序,然后再找到其中的第二个元素,找到第二个元素后,再选择其中的p标签。最后再查看父级元素是不是section元素。我们现在来看看html结构,发现子元素有p标签div标签span标签(这里不考虑body标签和html标签),好的,给他们一一编号,注意这个编号是在同一个父级元素里面的子元素之间进行,这样我们可以知道第一个p标签其实是4号。也就是说nth-child(2)选中的元素有divspan,没有p标签。所以p:nth-child(2)自然就得不到结果了。所以样式不起作用。那么nth-of-type怎么就可以选中呢?这是因为nth-of-type的编号比nth-child多了一个限制条件,那就是它编号的是同类标签。也就是说,找到dom树中的子元素后,先按照同类标签分类,再对每类标签从1开始编号,这样编号结果其实就和标签里面的数字编号一致了。因此就可以得到上面的结果啦。
    为了更好的体现出nth-child的特性,再举几个例子:

    :nth-child(2) {
       background-color: blue;
    }
    

    大家说这个效果是什么呢?效果是这样的:
    在这里插入图片描述
    效果图3

    是不是吓一跳?怎么全变蓝呢?其实根据上面的分析,我们可以发现bodyhtml的第二个子元素,知道这一点就不奇怪了。
    再看下面这个:

    :nth-of-type(2) {
       color: blue;
    }
    

    在这里插入图片描述
    可以看到所有2号元素都变蓝了。表示选中了所有同类元素里面的第二个元素。

    以上。

    展开全文
  • 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选择器:nth-child() 简单的归纳下nth-child()的几种用法。 第一:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。(EG) li:nth...
  • 今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari...
  • 面对更多的兼容性问题,今天我们就来“前瞻”一下CSS3的一个伪类选择器“nth-child()”。 CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上...
  • 而“:nth-child(n)”选择器是匹配属于其父元素的第N个子元素,元素类型是没有限制的。 (推荐教程:CSS视频教程) 1、:nth-child() 选择器 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型,n...

    区别:两种匹配的元素不同,“:nth-of-type(n)”选择器是匹配属于父元素的特定类型的第N个子元素,元素类型是有限制的;而“:nth-child(n)”选择器是匹配属于其父元素的第N个子元素,元素类型是没有限制的。



    (推荐教程:CSS视频教程)

    1、:nth-child() 选择器

    :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型,n 可以是数字、关键词或公式。

    2、:nth-of-type(n)
    :nth-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素,元素类型没有限制;n可以是数字、关键词或公式。

    3、具体区别

    首先看代码



    p:nth-of-type(7) 选择的 p元素所在的父元素下的第7个P元素 即:

    第7个p



    p:nth-child(6) 选择的 p元素所在的父元素下的第6个子元素,且该元素是P元素 即:

    第5个p



    结果



    4、odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词
    odd选择奇数 even选择偶数

    :nth-child(odd)



    上述例子p:nth-child(odd):选择的是P的父级元素下的,奇数元素且该元素是P元素, 所以是

    第二个段落。

    第四个段落。

    ( p:nth-child(n) n=3和 n=5)

    :nth-child(even)
    -上述例子p:nth-child(even):选择的是P的父级元素下的,偶数元素且该元素是P元素 ,所以是

    第一个段落。

    第三个段落。

    第五个段落。

    ( p:nth-child(n) n=2和 n=4 和 n=6)

    :nth-of-type(odd)


    -上述例子p:nth-of-type(odd):选择的是P的父级元素下的,奇数的P元素 ,所以是

    第一个段落。

    第三个段落。

    第五个段落。

    ( p:nth-of-type(odd) n=1和 n=3 和 n=5)

    :nth-of-type(even)


    -上述例子p:nth-of-type(even):选择的是P的父级元素下的,偶数的P元素 ,所以是

    第二个段落。

    第四个段落。

    ( p:nth-of-type(even) n=2和 n=4 )

    5、 :nth-of-type(an+b) 和 :nth-of-type(an+b ) 规则和上述阐述的规则一样
    a表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。
    比如: :nth-of-type( 2n+1) 就是第1,3,5 个P元素

    展开全文
  • CSS:nth-childnth-of-type的深入理解

    千次阅读 2018-11-02 21:37:23
    div .div:nth-of-type(1) { background: #ff0000; } &lt;/style&gt; &lt;body&gt; &lt;div&gt; &lt;h1&gt;第一个h1标题&lt;/h1&gt; &lt;div&

    啰嗦一句

    这两个选择器,可不是看起来那么简单的使用,如果没有彻底理解,蒙圈那是必须的——-如下代码:

    <style>
    div .div:nth-of-type(1) {
    	background: #ff0000;
    }
    </style>
    <body>
    	<div>
    		<h1>第一个h1标题</h1>
    		<div>第一个div。</div>
    		<div class="div">第一个div.div。</div>
    		<p>第一个p段落。</p>
    		<p class="p">第一个p.p段落。</p>
    		<h1 class="p">第二个h1.p标题</h1>
    		<div>第二个div。</div>
    		<div class="div">第二个div.div。</div>
    		<p>第二个p段落。</p>
    		<p class="p">第二个p.p段落。</p>
    	</div>
    </body>
    

    结果:

    image

    看起来明明就是第一个啊,为啥就没反应??崩溃中... 别急,仔细分析分析吧,大有文章的。

    :nth-child(n)

    先来看看nth-child

    官方解释是::nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

    这个还是很好理解的:我就从当前父元素下开始数数,至于你是谁,我不认识,数到第n个元素,然后拿出来,好了,再看看你是不是和我找的匹配,是,那我就给你画一画,不是,那就啥也不做,拜拜吧。

    看几个直观的栗子就了然了(声明:为了减少重复,所有的html结构都是开篇中代码的,后面就不在重复粘贴了):

    1. 找第一个div,然而这样是找不到的,第一个元素不是div,是h1

    
    div div:nth-child(1){
        background: #FFFF00;
    }

    结果:

    所以要这样找,第2个元素才是div

    div div:nth-child(2){
    	background: #FFFF00;
    }

    结果:

    2. 按class类型找,结果一样,找.p元素,发现第一个 .p元素居然是第5个,同样第二个其实是第6个h1标签(可自行验证):

    /*div .p:nth-child(1){
        background: #FFFF00;
    } 无效的,第一个元素是h1,不是.p  */
    
    div .p:nth-child(5){
        background: #FFFF00;
    }

    结果:

    3. 如果没有指定的选择元素,则直接选择第n个元素:

    div :nth-child(1){
    	background: #FFFF00;
    }

    结果:

    好了,换下一话题

    :nth-of-type(n)

    再来看看nth-of-type

    官方解释::nth-of-type(n)选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。

    嗯,就是当前父元素下,按元素类型(注意是元素类型,与class无关,理解这点很重要)分类后 ,在每一类元素中寻找属于该类元素的第n个值,然后匹配,成则成,否则罢。

    嗯就是多了这么一层先分类,再在每一类中找,这就是很大的区别了,而且在按class类型选择的时候,有可能就绕进去了(就如开篇中那个崩溃的栗子)。

    因为按元素名称选其实很好理解,分类完第几个就是第几个。这里就详细解释带class类型的选择,我们还是先看栗子(说明一下,按照定义,我们的栗子中父元素下有三类子元素,h1,div和p)

    1. 选择div中第一个包含.div的元素:

    div div.div:nth-of-type(2) {
    	background: #ff0000;
    }
    

    结果

    这里必须是2才能找到,写1的时候是找不到的(开篇的栗子),因为分类后,第二div元素才是有class类的,第一个是没有的。同理,找第二个包含.div的div元素,得写4,因为本例子中,一共四个div,其中第四个div才是第二次包含class类的。另外,注意这里强调了选择器复合选择器  div.div,这很重要,因为这样取出来的是一个值,下一个栗子是直接选类的,就会有多个值。

    2. 选择含有.p  class的元素

    div .p:nth-of-type(2) {
    	background: #ff0000;
    }
    
    /*有人会说如下这么选,也只选出了一个元素,那是因为在本例子中,符合条件的确实只有一个
    div .div:nth-of-type(2) {
    	background: #ff0000;
    }*/

    结果:

    看,选出两个,还是不同元素的,这首先说明,直接写class类选择不加复合限定,是找出每个元素类别中对应的第n个元素,然后匹配class,会有多个值,本例中,p和h1元素中的第二个元素刚好都符合,所以被选中。有的同学可能迷糊了,认为这个应该选出的是“第二个p.p段落”或者只有“第二个h1.p标题”这两种情况,这是因为没有理解“nth-of-type中先按父元素包含的元素分类(不是按你写的class分类,class只是用于最后匹配的)后,在分别寻找其中第n个,然后匹配”的规则。这句话要细细的理解:不是你所认为的第n个具有class的元素,而是每类元素中的第n个元素是否有这个class。

    有的同学可能又会说了,不是啊,我平时这么写,选的就是按顺序来的,第二个有class的元素我也选中了呀,那是因为你写的代码凑巧都是同一类型的元素,并且所有元素都具有同样的class,这也是平时我们没有觉得这个选择器有怪异的原因。大家可以自行测试,写同一类元素,但是每隔一个,写一个class,你就会发现不一样了。就本例子,也可以说明,同类型的p元素,如果要选择第二个具有.p class的元素,我得写.p:nth-of-type(4),这里的n实际是4而不是2。

    这个地方多说了这么多,这也就是这个选择器会蒙圈的地方,我曾经就被坑了很久,希望看完以后希望能对这个选择器有重新的认识。

    3. 不指定元素的情况:

    div :nth-of-type(2) {
    	background: #ff0000;
    }

    结果:

    选中了每一类元素的第二个元素,理解了上一个栗子,这个就非常好理解了。

    总结一下

    啰嗦完了,要总结一下:

    1. 两选择器都是选择子元素的,都是从当前父元素开始查找;

    2. nth-child系列包括first-child,last-child等等,都是只选择第n个元素,不管类型,然后匹配,所以无论如何,最多只有一项;

    3. nth-of-type是将元素分类,然后选择每一类中的第n个,然后匹配,所以如果没有复合限定,可能会有多个匹配项;

    4. 谨记,nth-of-type在选择时,n值与父元素下当前类型元素中的顺序有关,与class次序无关,class只在最后匹配中有用。

    更多内容和js插件,欢迎点此访问个人主页! 文章链接

    展开全文
  • 1、first-child、last-childnth-child(n)、nth-child(2n)、nth-child(2n-1)、nth-child(odd)、nth-child(even)、nth-last-child(3)(倒数第三个) 注意点: 选择器匹配属于其父元素的第 N 个子元素,不论元素的...
  • 后面两个Class为空来应对可能增加的列数来调节列宽 $(“div>p”).parent().not($(“.grid_2”)).filter(“nth-child(“+lenth+”n+1)”)来选择每行的第2列,但是却选中了第三列,百思不得其解 利用firbug查询该元素...
  • nth-child 实用技巧

    千次阅读 2019-01-16 18:45:33
    nth-child 是 CSS 里,一个不太注目、但在某些场景下很实用的选择器,本文记录码者搬砖过程中使用 nth-child 的一些案例。 选择器是什么 类似: #container 选择页面上 id 为 container 的元素 .wrapper 选择别...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,075
精华内容 23,230
关键字:

nth-child