CSS3伪类选择器之 :nth-child()

2019-04-17137次阅读css3

先了解一下选择器为CSS3结构类的有哪些:

  • :first-child选择某个元素的第一个子元素;
  • :last-child选择某个元素的最后一个子元素;
  • :nth-child()选择某个元素的一个或多个特定的子元素;
  • :nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
  • :nth-of-type()选择指定的元素;
  • :nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
  • :first-of-type选择一个上级元素下的第一个同类子元素;
  • :last-of-type选择一个上级元素的最后一个同类子元素;
  • :only-child选择的元素是它的父元素的唯一一个了元素;
  • :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
  • :empty选择的元素里面没有任何内容。

本文重点说一下:nth-child(),因为我要实现下面的效果:

是不是很简单,第一感觉就是:nth-child(1),:nth-child(2)就可以实现,那能不能有更优雅方式实现呢?

:nth-child()可以选择某个的一个或多个特定的子元素,你可以按这种方式进行选择,下面length为整数:

  •  :nth-child(length);/*参数是具体数字*/
  •  :nth-child(n);/*参数是n,n从0开始计算*/
  •  :nth-child(n*length)/*n的倍数选择,n从0开始算*/
  •  :nth-child(n+length);/*选择大于length后面的元素*/
  • :nth-child(-n+length)/*选择小于length前面的元素*/
  • :nth-child(n*length+1);/*表示隔几选一*/

        
:nth-child()可以定义他的值(值可以是整数,也可以是表达式),如上面所示,用来选择特定的子元素,记住length=1是索引第一个子元素。

:nth-child(3),选择某元素下的第三个子元素,可以这样写:

 .demo li:nth-child(3) {background: lime;}

效果如下所示:

这种方式不能引用负值,也就是说li:nth-child(-3)是不正确的使用方法。

:nth-child(n),其中n是一个简单的表达式,那么"n"取值是从“0”开始计算的,到什么时候结束我也不知道,如果你在实际应用中直接这样使用的话,将会选中所有子元素,比如说,你在li中使用":nth-child(n)",那么将选中所有的"li",如:

 .demo li:nth-child(n) {background: lime;} 
//等于
.demo li {background: lime;}

他其实是这样计算的

  • n=0 --》 没有选择元素
  • n=1 --》 选择第一个li,
  • n=2 --》 选择第二个li,后在的依此类推,这样下来就选中了所有的li

请看效果:

请注意了,这里的“n”只能是"n",不能使用其他字母代替,不然会没有任何效果的。

:nth-child(2n),这中方式是前一种的变身,我们可以选择n的2倍数,当然其中“2”可以换成你自己需要的数字,如:

.demo li:nth-child(2n) {background: lime;}
//等于
.demo li:nth-child(even) {background: lime;}

我们来看一下其计算的过程:

  • n=0 --》 2n=0 --》 没有选中任何元素,
  • n=1 --》 2n=2 --》 选择了第二个li
  • n=2 --》 2n=4 --》 选择了第四个li,后面的依此类推

如果是“2n”这样跟我们以使用"even"命名class定义样式,所起到的效果是一样的,如图所示:

“:nth-child(2n)”也等于":nth-child(even)"效果。

:nth-child(2n-1),这个选择器是在":nth-child(2n)"基础上演变过来的,上面说了人是选择偶数,那么我们在他的基础上减去“1”就变成奇数选择,如:

.demo li:nth-child(2n-1) {background: lime;}

我们来看看其实现过程

  • n=0 --》 2n-1=-1 --》 也没有选中任何元素,
  • n=1 --》 2n-1=1 --》 选择第一个li
  • n=2 --》 2n-1=3 --》 选择第三个li,后面的依此类推

其实实现这种奇数效果,我们还可以使用":nth-child(2n+1)"和":nth-child(odd)",一起来看他们的效果

:nth-child(n+5)这个选择器是选择从第五个元素开始选择,这里的数字你可以自己定义,如:

.demo li:nth-child(n+5) {background: lime;}

按前面的计算方法,我们来看看,

  • n=0 --》 n+5=5 --》  选中第5个li
  • n=1 --》 n+5=6 --》  选择第6个li,后面的就不列出来了,原理一样

你可以使用这种方法选择你需要开始选择的元素位置,也就是说换了数字,起始位置就变了,看下在的效果图:

:nth-child(-n+5)这种选择器刚好和上面的选择器相反,这个是选择第5个前面的,如:

.demo li:nth-child(-n+5) {background: lime;}

如果不清楚怎么一回事,你只要计算一下就明白了

  • n=0 --》 -n+5=5 --》 选择了第5个li
  • n=1 --》 -n+5=4 --》 选择了第4个li
  • n=2 --》 -n+5=3 --》 选择了第3个li
  • n=3 --》 -n+5=2 --》 选择了第2个li
  • n=4 --》 -n+5=1 --》 选择了第1个li
  • n=5 --》 -n+5=0 --》 没有选择任何元素

从上面的计算方法中,大家很清楚的知道是怎么得来的,最后我们一起看看效果吧:

:nth-child(4n+1)这种方法是实现隔几选一的效果,比如我们这里是隔三选一,如果你把"4"换成别的数字那就是另外的一种隔法了,比如这个实例

.demo li:nth-child(4n+1) {background: lime;}

我们主要来看其计算出来的结果

  • n=0 --》4n+1=1 --》选择了第一个li
  • n=1 --》4n+1=5 --》选择了第五个li
  • n=2 --》4n+1=9 --》选择了第九个li

效果如下

IE6-8和FF3-浏览器不支持":nth-child"选择器。

相信各位看到这里,应该知道如何实现开篇的需求了吧

&:nth-child(-n+2){}

 

上一篇: 你必须知道的10个Composer最佳实践 [转]  下一篇: JavaScript设计模式之发布订阅模式  

CSS3伪类选择器之 :nth-child()相关文章