详解CSS3中:nth-child的用法

CSS3中:nth-child的实际用途:不适用低版本的IE浏览器!

(1):nth-child(n + 4)选取大于等于4的标签,其中"n"为整数,下同

.demo01 li:nth-child(n+4){background:#090}


(2):nth-child(-n + 4)选取小于等于4的标签

.demo01 li:nth-child(-n+4){background:#090}



(3):nth-child(2n)选取偶数标签,其中的2n也可以写成even

.demo01 li:nth-child(2n){background:#090}



(4):nth-child(2n - 1)选取奇数标签,其中2n-1也可以写成odd

.demo01 li:nth-child(2n-1){background:#090}



(5):nth-child(3n + 1)自定义选取标签,3n+1表示“隔二取一”

.demo01 li:nth-child(3n+1){background:#090}



(6):last-child表示选取最后一个标签

.demo01 li:last-child{background:#090}



(7):nth-last-child(3)表示选取倒数第几个标签,3表示选取倒数第三个标签

.demo01 li:nth-last-child(3){background:#090}


(8):nth-last-child(odd)表示选取倒数的奇数标签,其中odd也可以写成2n-1;

.demo01 li:nth-last-child(odd){background: #090;}


(9):nth-last-child(even)表示选取倒数的奇数标签,其中odd也可以写成2n;

.demo01 li:nth-last-child(even){background: #090;}



你可能感兴趣的:(详解CSS3中:nth-child的用法)