为列表项模式添加 css 样式

Question

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

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

为列表项模式添加 css 样式

Add css styles to list item pattern

html

css

css-selectors

pseudo-element