:nth-child() 为什么是从1开始不是从0开始

之前上课时jQuery讲师说到:

:nth-child(b) b要从1开始,不知道为什么

比如$('tr td:nth-child(2)').css('background','black'),会选取tr 底下的第2个td变黑(1然后2,真正意义上的2)

但jQuery的其他选取器,如:eq(b),:lt(b),:gt(b),:odd... 里面的参数b都要从0开始
比如$('td:lt(3)').css('background', 'black') 会选取小于第3个的td们,使他们背景变黑。
也就是选取了第0个td、第1个td、第2个td,共3个。(第3个的3并没有小于3)

这样的不一致有点令人困惑
是因为:nth-child()是CSS原生的语法,后者是jQuery的语法吗?

序数Ordinal numbers

首先讲序数,第1的英文叫 first,第2 叫 second...,那第0叫什么,有这个东西吗?
答案是有的
就叫做 zeroth
特殊领域专业甚至还会用到epsilonth(εth)这种东西。

接者就要讨论到,从几开始,这个老问题

从0开始的记数

先看看wiki Zero-based_numbering
里面大意是说

计算机工程不像日常使用上,很多有序的东西是从0开始计算,也就是array首项叫做 第0项。虽然这样的合理性或逻辑上的正确性没有共识,但已是常态。

(里面也讨论了格里历vs天文纪年,建筑物的一楼到底该叫0楼还是一楼呢,等等的问题,蛮有趣的,有兴趣可以看看)

:nth

回到问题,nth是什么?
'n' stands for "Natural number",也就是0和所有正整数
‘th’ stands for ordinal indicator 像是 5th 6th。
以是自然数这样来看0th没有什么不对啊? 但今天后面是 -child(n)。
如果今天n跟:gt(n)一样,从0开始:
n为0时 那 0th-child就会等于 :first-child;而 1th-child 却不是 first-child

这就很混乱了。所以这个语法中,第一个小孩,我们就会说是第一个小孩,而不是第0个小孩。
这是为什么nth-child(n)的 n 是从1开始计算,而不是从0开始,的推测答案。


个案理解了,那通则而言哪些语言的哪些方法是从0开始,哪些又是从1开始呢?
这应该会是个庞大而难以穷尽的问题
刚刚那篇wiki有提到部分:

高阶语言如Fortran或COBOL,因为需要与一般上的序数对应,所以是从1开始。(JS也是3GL阿)APL允许设定要从0或从1开始其他避免误译,可以进连结去看

那从0开始的各语言,0是个unsigned integer,还是有所谓正0,负0呢?
这应该是另一个问题了


以上的答案,如果觉得有个人推论上的瑕疵
可以採用mozilla的说明来记忆,就不会有问题了

:nth-child(an+b)

:nth-child(5n)
Represents elements 5 [=5×1], 10 [=5×2], 15 [=5×3], etc. The first one to be returned as a result of the formula is 0 [=5x0], resulting in a no-match, since the elements are indexed from 1, whereas n starts from 0. This may seem weird at first, but it makes more sense when the B part of the formula is >0, like in the next example.

:nth-child(n+7)
Represents the seventh and all following elements: 7 [=0+7], 8 [=1+7], 9 [=2+7], etc.

大意是说,表定上5n第一个符合的值是0,但因为index从1开始,所以0略过。
这样的定义或许乍看下有点奇怪,但如果是5n+1第一个符合的就是1,第二个符合的是6,就能因此很合逻辑。


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章