nth-child 的妙用

版权声明：本文为博主（风轻云淡）原创文章，未经博主允许不得转载。CSDN https://blog.csdn.net/qq_20343517/article/details/82944842

你不知道的 :nth-child

我们平时使用 :nth-child 的普遍用法是

p:nth-child(1){
    color:red;
}

表示获取在兄弟元素中的位置为1的<p>标签，实际上这里的1并非只能是一个数字，还可以是其他的数据格式。

an+b

这是一个表达式，这里的n从0开始取值，每次+1后代入计算，最终得出一个位置的数组，比如：p:nth-child(2n-1)

n=0时 2n+1=1
n=1时 2n+1=3
n=2时 2n+1=5

所以就等价于p:nth-child(1)和p:nth-child(3)和p:nth-child(5)...取得是一个集合，也就是位置是1、3、5...

如果要选择的是大于等于某个位置的，可以用 :nth-child(n+a),比如 :nth-child(n+4) 表示大于等于第4个位置。

相反要选择的是小于等于某个位置的，可以用 :nth-child(-n+a), 比如 :nth-child(-n+4) 表示小于等于第4个位置。这个很有意思，验算一下：

n=0 时 -n+4=4
n=1 时 -n+4=3
n=2 时 -n+4=2
n=3 时 -n+4=1
n=4 时 -n+4=0

因为 :nth-child 的有效值是从 1 开始的（>=1）所以 :nth-child(-n+4) 的取值位置数组也就是[1,2,3,4](即小于等于4)

那么可不可以选择一个区间内的呢？比如要获取第3个到第7个位置，通过上面的大于等于和小于等于可以很自然地得出下面的答案：

p:nth-child(n+3):nth-child(-n+7){
    color:red;
}

这种组合方式其实可以持续下去，延伸出更多更深的选择范围

odd

奇数位， :nth-child(odd)  等价于 :nth-child(2n+1)

even

偶数位， :nth-child(even)  等价于 :nth-child(2n)