CSS控制li個(gè)數(shù)需要用到偽類選擇器:nth-child。它可以選擇某個(gè)元素的父元素下的第N個(gè)子元素,這里的N可以為數(shù)字、odd(奇數(shù))或even(偶數(shù))。
ul li:nth-child(2n+1) { /*控制奇數(shù)行的樣式*/ color: red; } ul li:nth-child(2n) { /*控制偶數(shù)行的樣式*/ color: blue; }
上面的代碼意思是選擇ul下的li元素,其中奇數(shù)行的樣式為紅色,偶數(shù)行的樣式為藍(lán)色。如果要控制li的個(gè)數(shù),則可以在nth-child中填入數(shù)字,例如:
ul li:nth-child(5) { /*控制每行只有5個(gè)li元素*/ width: 20%; }
上面的代碼意思是選擇ul下的li元素,其中第5個(gè)元素的寬度為20%。這樣就可以控制每行只有5個(gè)li元素了。