将CSS样式添加到列表项模式

时间:2019-02-23 16:30:08

标签: html css css3 css-selectors pseudo-element

我正在使用HTML tensorflow-0.12.0rc0-cp35-cp35m-win_amd64.whl is not a supported wheel on this platform来显示一些数据

ul
#myList li {
  float: left;
  width: 50%;
  list-style: none;
  padding-left: 0;
  min-height: 150px;
  text-align: left;
}

我的设计是

enter image description here

我目前正在使用内联样式来显示背景颜色,

谁能帮助我通过一些伪选择器使用普通CSS应用这种样式。

1 个答案:

答案 0 :(得分:4)

#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>