nth:child()选择器

nth:child()属于CSS3中的选择器，针对于有多个相同标签时可以对每个标签的样式进行单独设置，以微信小程序开发中所写的代码为例：

这是wxml中的代码（类似于html）：

 

 这是wxss中的代码（类似于css）：

 

 最终效果为可拖动的轮播图：

 

 

 

D为白色，A为浅绿色，B为浅蓝色，C为白色

从swiper-item的父元素swiper查起，第一个应为D，第二个为A，第三个为B，第四个为C，以此类推。

但第一个swiper-item为白色而不是粉色，第二个A是浅绿色，是因为在nth-child后面还有限定.item，而D并没有设置class="item"，因此D还占一个位子但不设置颜色，A应从2开始设置为浅绿色

 :nth-child(n){}来匹配父元素中的第n个子元素，简单理解就是看 “ ：”前的元素的父元素，n为几，就从父元素的第一个元素开始查起到n