css选择器记录

:nth-child

文档里是这么描述的

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3…）
a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, …} 中的子元素。另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式。

这个伪类选择器我在使用过程中遇到各种奇奇怪怪的问题, 今天有空专心解决这个问题, 查阅资料并实践之后得出如下理解:
.class div:nth-child(an+b)

1. 获取所有类名为class元素
2. 获取其下所有子元素集合 (从1开始)
3. 筛选其中的第an+b个元素 (n从0开始)
4. 选中其中的div元素
   …孙元素重复上述过程, 层层向下选择

.class div :nth-child(an+b)
猛地一看好像跟上面一样, 实际大不相同
!! div与:之间多了个空格
这个坑我可是栽在里面好长时间, 今天可算是弄明白了
这个空格改变的是这个选择器的筛选顺序:

1. 获取所有类名为class的元素
2. 获取其中所有div元素
3. 获取其下所有子元素集合 (从1开始)
4. 选中其中的第an+b个元素 (n从0开始)

也就是说对选择器.class div的选择结果执行 :nth-child(an+b)
而上面第一种写法是对选择器 .class 的选择结果执行 div:nth-child(an+b)

这个伪类选择器还可以与子元素选择器一起用, 帮你更精准的选择你想要的元素
.class > div:nth+child(an+b)
.class div > :nth+child(an+b)