░░░░░░░░░ CSS3中的nth-of-type伪元素选择前几个或后几个 ░░░░░░░░░

CSS-CSS3

CSS3中的nth-of-type伪元素选择前几个或后几个。nth使用时应该注意几点。(n)中的n如果有运算,n必须放在前面,n从0开始递增,()内运算结果大于元素个数,运算自动停止。

选择1~9<li>如下:

li:nth-of-type(-n+9) {background:red}

选择9~最后<li>如下:

li:nth-of-type(n+9) {background:red}

选择倒数2个<li>如下:

li:nth-last-of-type(-n+2) {background:red}

nth-child也是同样用法:

li:nth-child(-n+9) {background:red}             //1~9个
li:nth-child(n+9) {background:red}              //9~最后
li:nth-last-of-type(-n+2) {background:red}      //倒数2个

这类应用在平时WEB开发经常用到。