[英]nth-child property for three column layout design?
如何將nth-child屬性實現為帖子循環顯示的三列布局。
現在我想指定nth-child屬性
1st,4th,7th,10th,13th child respectively and so
and
2nd,5th,8th,11th,14th child respectively and so on
and
3rd,6th,9th,12th ,15th child respectively and so on
用於不同的CSS
您可以像這樣使用nth-child
。 我將其全部用作演示中的div。
HTML:
<div>1</div><div>2</div><div>3</div>
<div>4</div><div>5</div><div>6</div>
<div>7</div><div>8</div><div>9</div>
<div>10</div><div>11</div><div>12</div>
<div>13</div><div>14</div><div>15</div>
CSS:
div {width:33%; background:grey; height:50px; float:left;}
div:nth-child(3n-1){background:green;}
div:nth-child(3n){background:blue;}
假設所有孩子都是li,則可以這樣使用nth-child
。
CSS代碼:
ul > li:nth-child(3n+1){
/*whatever your property may be*/
background-color:orange;
}
ul > li:nth-child(3n+2){
background-color:white;
}
ul >li:nth-child(3n){
background-color:green;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.