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

原文地址：http://edu.cnzz.cn/201303/8660623f.shtml

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

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

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

另外":nth-last-child()"也可以像“:nth-child()”一样，可以使用表达式来选择特定元素，下面我们来看几个特殊的表达式所起的作用

:nth- last-child(2n),这个表示的是从元素后面计算，选择的是偶数个数，从而反过来说就是选择元素的奇数，和前面的":nth- child(2n+1)",":nth-child(2n-1)",":nth-child(odd)"所起的作用是一样的。如：

.demo li:nth-last-child(2n) {background: lime;}
.demo li:nth-last-child(even) {background: lime;}
等于
.demo li:nth-child(2n+1) {background: lime;}
.demo li:nth-child(2n-1) {background: lime;}
.demo li:nth-child(odd) {background: lime;}
请看效果：

:nth-last-child(2n-1)这个选择器刚好跟上面的相反，从后面计算选择的是奇数，而从前面计算选择的就是偶数位了，这个前面的":nth-child(2n)"之类是相同的效果，如：
.demo li:nth-last-child(2n+1) {background: lime;}
.demo li:nth-last-child(2n-1) {background: lime;}
.demo li:nth-last-child(odd) {background: lime;}
等于：
.demo li:nth-child(2n) {background: lime;}
.demo li:nth-child(even) {background: lime;}
效果如下

看 了这几个实例，大家都知道":nth-last-child()"和"nth-child()"使用方法是一样的，只不过他们的区别是“:nth- child()”是从元素的第一个开始计算，而“:nth-last-child()”是从元素的最后一个开始计算，他们的计算方法都是一样的。同样在 IE6-8和FF3.0-浏览器不支持“:nth-last-child()”选择器。

转载于:https://www.cnblogs.com/HendSame-JMZ/articles/4307016.html