$("li:nth-child(n)")选择器与$("li:eq(n)")选择器的不同之处在于:
$("li:eq(n)")选择器只匹配一个元素,并且是所有匹配到的元素中的第n+ 1个元素(索引index从0开始算起);
$("li:nth-child(n)")选择器则先选择该元素所有父元素的第n个子元素,再判断是否满足要求(序号n从1开始算起),如果是就选择,否则不选择(满足条件的可能有多个)。

$("li:eq(-n)")选择倒数第n个元素,$("li:eq(-0)")选择正数第一个元素,$("li:eq(-1)")选择倒数第一个元素。

以下例子摘自https://blog.pivotal.io/labs/labs/css-first-child-nth-child-and-last-child-are-not-like-eq

if we had a snippet of HTML like

<div>
<div id="bar1" class="foo"></div>
<div id="bar2" class="foo"></div>
<div id="bar3" class="foo"></div>
</div>

Then the selector .foo:nth-child(2)will match the div #bar2. If we insert another element at the front of the container:

<div>
<p>Shift!</p>
<div id="bar1" class="foo"></div>
<div id="bar2" class="foo"></div>
<div id="bar3" class="foo"></div>
</div>

And again we select .foo:nth-child(2), we match the div #bar1 because the 2nd child of the container also matches .foo.

Thus, in this second example, if we try .foo:nth-child(1) or the equivalent .foo:first-child, we will not match any elements because the first child element in that container — the p tag — does not match .foo.

Likewise, :nth-child can match children in multiple containers. In the HTML snippet:

<div>
<p>Shift!</p>
<div id="bar1" class="foo"></div>
<div id="bar2" class="foo"></div>
<div id="bar3" class="foo"></div>
</div> <div>
<div id="quux" class="foo"></div>
</div>

the selector .foo:last-child will match the divs #bar3 and #quux; but .foo:first-child or .foo:nth-child(1) will only match #quux because the first child of the first container is, again, not a .foo.

CSS中:nth-child和JQuery:eq的区别的更多相关文章

  1. css中px,em和rem的区别

    css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示 ...

  2. css中word-break、word-wrap和white-space的区别

    css中word-break.word-wrap和white-space的区别 :https://baijiahao.baidu.com/s?id=1578623236521030997&wf ...

  3. css中:not()选择器和jQuery中.not()方法

    因为老是将这两个的not方法弄混,所以写一下备忘. css中:not()选择器用法 :not 伪类选择器可以筛选不符合表达式的元素,:not(selector) 其中的selector为css选择器 ...

  4. CSS3 nth-child的使用,详解css中nth的作用,以及nth-child的兼容写法

    :nth-child是css3的一个比较常用的选择器.它用于匹配属于其父元素中的子元素,不论元素的类型. 它的参数可以是数字.关键词或公式.下面讲介绍它的使用方法, nth-child的使用 html ...

  5. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  6. CSS中的margin、border、padding区别

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

  7. CSS中单位px和em,rem的区别

    PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  8. 彻底弄懂css中单位px和em,rem的区别 转的自己看

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  9. 弄懂css中单位px和em,rem的区别

              国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?         PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...

  10. 【转载】彻底弄懂css中单位px和em,rem的区别

    原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...

随机推荐

  1. Spark RDD/Core 编程 API入门系列 之rdd案例(map、filter、flatMap、groupByKey、reduceByKey、join、cogroupy等)(四)

    声明: 大数据中,最重要的算子操作是:join  !!! 典型的transformation和action val nums = sc.parallelize(1 to 10) //根据集合创建RDD ...

  2. 解决SDK下载时速度过慢的问题

    1.打开android sdk manager 2.打开tool->options,如图所示 3.将Proxy Settings 里的HTTP Proxy Server和HTTP Proxy P ...

  3. Navicat远程连接MySQL数据库

    1.打开Navicat,在界面的“主机名和IP地址”处输入IP地址,一般是192.168.1.1 2.输入相应的用户名和密码,点击连接测试,确认是否已经连接,之后就可以点击确定了 3.找到相应的数据库 ...

  4. GWT用frame调用JSP

    Frame htmlFrame = new Frame("../OurHome/modules/core/mainIndex.jsp?merchantId="+merchantId ...

  5. myeclipes使用过程中的错误解决方案

    1.‘Building workspace’ has encountered a problem. Errors occurred during the build. 解决方案:这样的错误,主要是由于 ...

  6. NVMe 图解

    http://www.ssdfans.com/?p=1143#rd&sukey=3997c0719f151520989740bb972a716fdb2dbab623808d16acd5075b ...

  7. Linux shell的&&和||--转载

    Linux shell的&&和||   shell 在执行某个命令的时候,会返回一个返回值,该返回值保存在 shell 变量 $? 中.当 $? == 0 时,表示执行成功:当 $? ...

  8. Linux学习笔记总结--云服务器挂载磁盘

    1.通过 "fdisk -l" 命令查看 若执行fdisk -l命令,发现没有 /dev/xvdb 表明云服务无数据盘 2. 对数据盘进行分区 执行"fdisk  /de ...

  9. AFNetWorking源码详解(二)

    来源:Yuzeyang 链接:http://zeeyang.com/2016/03/15/AFNetWorking-two/ AFHTTPSessionManager继承于AFURLSessionMa ...

  10. HDU2083JAVA

    简易版之最短距离 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...