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

【问题标题】：Add css styles to list item pattern将 CSS 样式添加到列表项模式
【发布时间】：2019-07-17 12:34:50
【问题描述】：

我正在使用 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 应用这种样式。

【问题讨论】：

标签： html css css-selectors pseudo-element

【解决方案1】：

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

【讨论】：