:nth-of-type理解

前言

在dom中对标签数数时，序号是从1开始，

只有以nth-***开头时，里面的n是从0开始 。(在乘法中看不出效果,但在加法中会有区别.aa:nth-child(n+2){font-size:50px;}),此处的n就是从0开始

个人理解

nth-child直接按顺序数数，一旦数到了，再观察该dom是否有指定的css类和html标签

nth-of-type会先把html标签分类，再对每类标签按顺序数数，一旦数到了，再观察该dom是否有指定的css类和html标签

html标签分类可以如下图进行想象

枚举伪类

例子

 例子

 例子

 例子

最后，发现一个技巧，可以限定数量及位置

仿朋友圈布局：1~9宫格css自适应_哔哩哔哩_bilibili仿朋友圈布局：1~9宫格css自适应https://www.bilibili.com/video/BV1RL411u7C7