巧用CSS节点选择器nth-child

2020年07月12日 15点热度 0人点赞 1条评论

先来说几种比较常见的用法:

1、选择正数第一个或倒数第一个

li:first-child {
	color: red;
}

li:last-child {
	color: red;
}

2、选择所有偶数节点或所有奇数节点

li:nth-child(even) {
	color: red;
}

li:nth-child(2n) {
	color: red;
}

li:nth-child(odd) {
	color: red;
}

li:nth-child(2n+1) {
	color: red;
}

li:nth-child(2n-1) {
	color: red;
}

再来说几种更牛叉的用法:

3、选择前几个节点

/** 选择前 5 个 **/
li:nth-child(-5+n) {
	color: red;
}

4、选择第几个节点之后的所有节点

/** 选择第 5 个节点 和 之后的所有节点 **/
li:nth-child(n+5) {
	color: red;
}

5、选择倒数第几个节点

li:nth-last-child(5) {
	color: red;
}

6、选择倒数第几个节点之前的所有节点

/** 选择倒数第 2 个节点 和 之前的所有节点 **/
li:nth-last-child(n+2) {
	color: red;
}

7、选择后几个节点

这个暂时没找到!欢迎大神指点赐教。

李鬼手

努力做个万能的程序猿!

文章评论

  • 冬冬

    写得很详细。

    2020年07月18日