????????? 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開發經常用到。