关注互联网应用及运维技术的个人博客

巧用CSS节点选择器nth-child

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

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;
}
赞(0)
未经允许不得转载:飞天狒狒 » 巧用CSS节点选择器nth-child

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址