CSS中:nth-child和JQuery:eq的区别
$("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的区别的更多相关文章
- css中px,em和rem的区别
css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示 ...
- css中word-break、word-wrap和white-space的区别
css中word-break.word-wrap和white-space的区别 :https://baijiahao.baidu.com/s?id=1578623236521030997&wf ...
- css中:not()选择器和jQuery中.not()方法
因为老是将这两个的not方法弄混,所以写一下备忘. css中:not()选择器用法 :not 伪类选择器可以筛选不符合表达式的元素,:not(selector) 其中的selector为css选择器 ...
- CSS3 nth-child的使用,详解css中nth的作用,以及nth-child的兼容写法
:nth-child是css3的一个比较常用的选择器.它用于匹配属于其父元素中的子元素,不论元素的类型. 它的参数可以是数字.关键词或公式.下面讲介绍它的使用方法, nth-child的使用 html ...
- 彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
- CSS中的margin、border、padding区别
CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...
- CSS中单位px和em,rem的区别
PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- 彻底弄懂css中单位px和em,rem的区别 转的自己看
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- 弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...
- 【转载】彻底弄懂css中单位px和em,rem的区别
原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...
随机推荐
- Spark RDD/Core 编程 API入门系列 之rdd案例(map、filter、flatMap、groupByKey、reduceByKey、join、cogroupy等)(四)
声明: 大数据中,最重要的算子操作是:join !!! 典型的transformation和action val nums = sc.parallelize(1 to 10) //根据集合创建RDD ...
- 解决SDK下载时速度过慢的问题
1.打开android sdk manager 2.打开tool->options,如图所示 3.将Proxy Settings 里的HTTP Proxy Server和HTTP Proxy P ...
- Navicat远程连接MySQL数据库
1.打开Navicat,在界面的“主机名和IP地址”处输入IP地址,一般是192.168.1.1 2.输入相应的用户名和密码,点击连接测试,确认是否已经连接,之后就可以点击确定了 3.找到相应的数据库 ...
- GWT用frame调用JSP
Frame htmlFrame = new Frame("../OurHome/modules/core/mainIndex.jsp?merchantId="+merchantId ...
- myeclipes使用过程中的错误解决方案
1.‘Building workspace’ has encountered a problem. Errors occurred during the build. 解决方案:这样的错误,主要是由于 ...
- NVMe 图解
http://www.ssdfans.com/?p=1143#rd&sukey=3997c0719f151520989740bb972a716fdb2dbab623808d16acd5075b ...
- Linux shell的&&和||--转载
Linux shell的&&和|| shell 在执行某个命令的时候,会返回一个返回值,该返回值保存在 shell 变量 $? 中.当 $? == 0 时,表示执行成功:当 $? ...
- Linux学习笔记总结--云服务器挂载磁盘
1.通过 "fdisk -l" 命令查看 若执行fdisk -l命令,发现没有 /dev/xvdb 表明云服务无数据盘 2. 对数据盘进行分区 执行"fdisk /de ...
- AFNetWorking源码详解(二)
来源:Yuzeyang 链接:http://zeeyang.com/2016/03/15/AFNetWorking-two/ AFHTTPSessionManager继承于AFURLSessionMa ...
- HDU2083JAVA
简易版之最短距离 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...