以清單項目來舉例：
如果想對清單項目內的字體設定不同的顏色，
而此時有100個清單，也不可能一個一個慢慢做設定，
就可以採用循環樣式：nth-child。
使用方式為：nth-child(n)
參數n改成可循環的an+b，
a：每次循環中共有幾種樣式；
b:樣式在循環中所處的位置。
範例：
List
- li-1
- li-2
- li-3
- li-4
- li-5
- li-6
- li-7
上面清單項目所套用的CSS為：
/*Yellow*/
li:nth-child(3n+1) {
background: #DCF273;
}
/*Blue*/
li:nth-child(3n+2) {
background: #496FC9;
}
/*Red*/
li:nth-child(3n+3) {
background: #DB6147;
}
以 li:nth-child(3n+1) { background: #DCF273;} 來說，
3表示每三種樣式循環一次，
1表次第一個清單項目字體為黃色。
全站熱搜
留言列表
