有的時候設(shè)計小姐姐非常的任性，給出一大堆顏色千奇百怪的toolbar，怎么辦？
好氣喔，還是得認認真真的畫

首先看 效果如下

781543312360_.pic.jpg

我們不用給每一個btn單獨添加bg色值，一個:nth-child就可以完美實現(xiàn)，以下描述的地方我們統(tǒng)稱為nth，前情提要，我使用的css預(yù)處理器是stylus，下面的變量將都會以stylus的語法陳述

nth是css3的偽類選擇器大致用法有以下幾種
1、指定數(shù)值
舉例說明： 1）需求-將一個列表中的第1(x)項標記紅色
實現(xiàn)
//聲明方法
add(a)
a = unit(a,px)
bg()
background arguments

    .tab-group 
        height add(200)
        display flex
        align-items $ct
        justify-content $ct

        .tab-items
            height add(80)
            width add(80)
            line-height add(40)
            border-radius add(40)
            margin-right add(20)
            text-align ct
            bg(base-col)
            
            &:nth-child(1)
                bg(col1)

效果：

791543313511_.pic.jpg

2.指定周期
舉例說明： 1）需求-列表實現(xiàn)單雙色輪換
實現(xiàn)
&:nth-child(2n)
bg(col4)
或 &:nth-child(even)
bg(col4)
效果：

831543315695_.pic.jpg

實現(xiàn)
&:nth-child(3n+1)
bg(col4)
&:nth-child(3n+2)
bg(col5)
&:nth-child(3n+3)
bg(col6)
效果：

841543317015_.pic.jpg

這里的n我是這樣理解的 n就是一個組 2n就是兩個元素一組 3n就是三個元素一組，以此類推，+-的基準都是以當前組的第一個元素開始計算，當然超過組別大小會跑到隔壁組進行渲染 比如
&:nth-child(2n+4)
bg($col4)
效果：

861543317673_.pic.jpg

歪！ 你跑到隔壁去啦！

有了這個神器，只需要定義好顏色值，不管多么眼花繚亂的效果，都給設(shè)計小姐姐完成的漂漂亮亮的，并且不需要添加許許多多l(xiāng)ow炸天的style1，style2，style3，想class名想的頭要炸裂有木有
給自己強化一下，所以做個筆記，還有一些用法我沒有一一列舉，個人感覺這三個 就很實用啦 有什么錯誤歡迎友好指正！
不準很兇！