我正在使用html ul
来显示一些数据
#myList li {
float: left;
width: 50%;
list-style: none;
padding-left: 0;
min-height: 150px;
text-align: left;
}
<ul id="myList">
<li>One</li>
<li style="background: #f9f9f9">Two</li>
<li style="background: #f9f9f9">Three</li>
<li>Four</li>
<li>Five</li>
<li style="background: #f9f9f9">Six</li>
<li style="background: #f9f9f9">Seven</li>
<li>Eight</li>
<li>Nine</li>
<li style="background: #f9f9f9">Ten</li>
<li style="background: #f9f9f9">Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>
</ul>
我的设计是
我目前正在使用内联样式来显示背景颜色,
任何人都可以帮助我通过一些伪选择器使用普通的CSS来应用这种风格。
#myList li {
float: left;
width: 50%;
list-style: none;
padding-left: 0;
min-height: 150px;
text-align: left;
}
#myList li:nth-child(4n + 2), li:nth-child(4n + 3){
background: #f9f9f9
}
<ul id="myList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>
</ul>