CSS3 选择器 伪类选择器介绍

2020-04-30 15:17:59易采站长站整理

.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"选择器。

4、:nth-last-child()
":nth-last-child()"选择器和前面的":nth-child()"很相似,只是这里多了一个last,所以他起的作用就和前面的":nth-child"不一样了,他只要是从最后一个元素开始算,来选择特定元素。我们来看几个实例:

.demo li:nth-last-child(4) {background: lime;}
上面代码表示选择倒数第四个列表项,效果如下:

其中":nth-last-child(1)"和":last-child"所起作用是一样的,都表示的是选择最后一个元素。