nth-child 学习笔记

ul li:nth-child(3n+3){

}

上面这段代码如何工做的呢.

括号中参数 能够接收两个关键字, even odd ;

even 表示只选择 偶数位的元素 第2 4 6 8 10.....项元素

odd 表示只选择 奇数位的元素 第1 3 5 7 9.....项元素

也能够接收一个表达式

最简单的表达式 仅有一个数字 就足够 若是你传入一个数字 2 那么他仅仅选中第二个元素

那么 当表达式是 3n+3 的时候,他是如何工做的呢.

其实 n 是一个从 0 开始的 正整数数组 [0,1,2,3,4,5....]

因此只要把这个数组里的每一项带入这个表达式计算一下

3*0 +3 =3

3*1 +3 = 6

3*2 +3 =9

能够看出 这个表达式选中的是 项数为 3 6 9 12..... 的元素

小练习 若是你要选中 1 10 11 21 项的 元素应该怎么作呢.

根据上面的 例子 咱们能够推论出

表达式 应该是这样的

10*0 +1 =1

10*1 +1 =11

10*2 +1 =21

因此最终的表达式应该是 (10n+1)

css-tricks.com/how-nth-chi…