详解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)表示选取倒数的偶数标签，其中even也可以写成2n；

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

最后

以上就是碧蓝大侠为你收集整理的详解CSS3中:nth-child的用法的全部内容，希望文章能够帮你解决详解CSS3中:nth-child的用法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。