[翻译]nth-child的工作机制
2010-05-22 09:52
239 查看
有一种CSS选择器叫做nth-child,是一种伪类选择器,下面是一个使用它的例子:
上面这段CSS做了什么?它选择了一个无序列表(UL)中能被3整除的子元素(LI),第3、第6、第9、第12……都在其作用范围。那么它是如何工作的呢?我们又能用它来做些什么?不妨一起来看一下。
归结起来,括号中的参数使用有2种方式,首先它可以接受关键字,这里只限”even”和”odd”两种关键词可以使用,显而易见,”even”代表偶数项目,而”odd”代表奇数项目。
就像上面那个例子中所见到的,nth-child的参数也可以是一个方程式。最简单的程式是什么?它可以只有一个数字。如果你将一个数字放在括号中,那么它将选择出与其对应的项目。如下面的例子,只选择出了第5个子元素。
让我们回到最上面的例子,看看3n+3是如何工作的。这里的关键在于”n”和数学方程式。想象n从0开始,对应所有正整数,0、1、2、3、……然后完成这个方程式。所以3n=3×n,而3n+3=(3×n)+3。然后将递进的正整数代入,我们得到:
(3 x 0) + 3 = 3 = 第三个子元素
(3 x 1) + 3 = 6 = 第六个子元素
(3 x 2) + 3 = 9 = 第九个子元素
以此类推。
那么:nth-child(2n+1)是什么样的呢?
(2 x 0) + 1 = 1 = 第一个子元素
(2 x 1) + 1 = 3 = 第三个子元素
(2 x 2) + 1 = 5 = 第五个子元素
以此类推。
嗨!等一下,这和”odd”所表示的一模一样,因此或许我们不会很频繁地用到这个方程式。但是等等,这是不是又说明我们原先的那个方程式(3n+3)太复杂了呢?为什么不用(3n+0)或者更简单的(3n)?
(3 x 0) = 0 = 无匹配
(3 x 1) = 3 = 第三个子元素
(3 x 2) = 6 = 第六个子元素
(3 x 3) = 9 = 第九个子元素
以此类推。
所以正如你看到的,(3n+3)、(3n+0)和(3n)实际上没有任何差别,所以完全没有必要+3。我们也可以使用负的n值,以及减法公式。例如(4n-1):
(4 x 0) – 1 = -1 = 无匹配
(4 x 1) – 1 = 3 = 第三个子元素
(4 x 2) – 1 = 7 = 第七个子元素
以此类推。
如果使用负数的n值,看起来会有些怪异,因为如果结果是负数,则不能匹配到任何元素。所以你需要再使用一个加法等式来使结果重新回到正数。
事实证明,这是一个相当聪明的技术,你可以用它来选择前n个子元素。比如(-n+3):
-0 + 3 = 3 = 第三个子元素
-1 + 3 = 2 = 第二个子元素
-2 + 3 = 1 = 第一个子元素
-3 + 3 = 0 = 无匹配
etc.
Sitepoint有一个很好的参考指南,其中包括了下面这个 handy-dandy table,我很不厚道地黏贴了过来。
#nthtable {border-collapse:collapse;margin:0 0 15px;width:100%;}
#nthtable th {background:#FE4902 none repeat scroll 0 0;color:white;font-weight:bold;}
#nthtable th, #nthtable td {border:1px solid #CCCCCC;padding:3px;text-align:center;}
比如你想给一个三行三列的表格中最右侧的一列删除右间距,你应该让这种效果兼容各种浏览器。
这里还有一个可取的方法是使用jQuery,它支持所有的CSS选择器,也包括这个nth-child。而它会被几乎所有浏览器所支持,也包括IE系列。
测试页
原文地址:http://www.decimage.com/web/how-nth-child-works.html
1 2 3 | ul li:nth-child(3n+3) { color: #ccc; } |
归结起来,括号中的参数使用有2种方式,首先它可以接受关键字,这里只限”even”和”odd”两种关键词可以使用,显而易见,”even”代表偶数项目,而”odd”代表奇数项目。
就像上面那个例子中所见到的,nth-child的参数也可以是一个方程式。最简单的程式是什么?它可以只有一个数字。如果你将一个数字放在括号中,那么它将选择出与其对应的项目。如下面的例子,只选择出了第5个子元素。
1 2 3 | ul li:nth-child(5) { color: #ccc; } |
(3 x 0) + 3 = 3 = 第三个子元素
(3 x 1) + 3 = 6 = 第六个子元素
(3 x 2) + 3 = 9 = 第九个子元素
以此类推。
那么:nth-child(2n+1)是什么样的呢?
(2 x 0) + 1 = 1 = 第一个子元素
(2 x 1) + 1 = 3 = 第三个子元素
(2 x 2) + 1 = 5 = 第五个子元素
以此类推。
嗨!等一下,这和”odd”所表示的一模一样,因此或许我们不会很频繁地用到这个方程式。但是等等,这是不是又说明我们原先的那个方程式(3n+3)太复杂了呢?为什么不用(3n+0)或者更简单的(3n)?
(3 x 0) = 0 = 无匹配
(3 x 1) = 3 = 第三个子元素
(3 x 2) = 6 = 第六个子元素
(3 x 3) = 9 = 第九个子元素
以此类推。
所以正如你看到的,(3n+3)、(3n+0)和(3n)实际上没有任何差别,所以完全没有必要+3。我们也可以使用负的n值,以及减法公式。例如(4n-1):
(4 x 0) – 1 = -1 = 无匹配
(4 x 1) – 1 = 3 = 第三个子元素
(4 x 2) – 1 = 7 = 第七个子元素
以此类推。
如果使用负数的n值,看起来会有些怪异,因为如果结果是负数,则不能匹配到任何元素。所以你需要再使用一个加法等式来使结果重新回到正数。
事实证明,这是一个相当聪明的技术,你可以用它来选择前n个子元素。比如(-n+3):
-0 + 3 = 3 = 第三个子元素
-1 + 3 = 2 = 第二个子元素
-2 + 3 = 1 = 第一个子元素
-3 + 3 = 0 = 无匹配
etc.
Sitepoint有一个很好的参考指南,其中包括了下面这个 handy-dandy table,我很不厚道地黏贴了过来。
n | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
---|---|---|---|---|---|---|
0 | 1 | 1 | 4 | - | - | 3 |
1 | 3 | 5 | 8 | 4 | 3 | 2 |
2 | 5 | 9 | 12 | 8 | 8 | 1 |
3 | 7 | 13 | 16 | 12 | 13 | - |
4 | 9 | 17 | 20 | 16 | 18 | - |
5 | 11 | 21 | 24 | 20 | 23 | - |
#nthtable th {background:#FE4902 none repeat scroll 0 0;color:white;font-weight:bold;}
#nthtable th, #nthtable td {border:1px solid #CCCCCC;padding:3px;text-align:center;}
浏览器兼容性
nth-child是众多非常不幸的CSS属性之一,它们被浏览器兼容风暴所洗礼,而被很多厂家刨除在外,不被接受。整个IE系列对这个属性是零支持,包括IE8。所以它被使用时,往往是以一种“渐进增强”的形式(例如,提供一个很酷的颜色调板表)。而当你想要创建某些更重要的内容时,类似于某些依托于网站结构的内容,你却不应该使用这个属性。比如你想给一个三行三列的表格中最右侧的一列删除右间距,你应该让这种效果兼容各种浏览器。
这里还有一个可取的方法是使用jQuery,它支持所有的CSS选择器,也包括这个nth-child。而它会被几乎所有浏览器所支持,也包括IE系列。
还有不理解的?
为了让你更好的理解,这里有一个测试页,在那里,你可以直接输入方程式,并立刻看到的结果是什么。测试页
原文地址:http://www.decimage.com/web/how-nth-child-works.html
相关文章推荐
- rsync工作机制(翻译)
- MapReduce工作机制详解(MapTask和ReduceTask)
- hdfs工作机制及读写数据简要流程图
- 详解CSS3中:nth-child的用法
- Nginx(2):工作机制
- 深入分析javaweb技术内幕之磁盘I/O工作机制
- 翻译工作总结
- nth-of-type和nth-child的区别
- Java中HashMap的工作机制
- :nth-child()和:nth-of-type(n)区别
- 第二章 Struts2的工作机制及分析
- [转]Stage 3D翻译系列之二:Stage 3D是如何工作的(深入篇)
- NIO组件Selector工作机制详解(下)
- linux工作队列机制
- 浏览器工作机制
- 转cookie和session工作机制和使用场合详解
- LTE UE不活动定时器的工作机制
- 深入分析 Java I/O 的工作机制
- oracle学习笔记 计算机缓存技术工作机制
- 事务复制的工作机制