Добавление стилей CSS в список элементов списка - PullRequest
Новая
       41

Добавление стилей CSS в список элементов списка

0 голосов
/ 23 февраля 2019

Я использую 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>

Мой дизайн

enter image description here

В настоящее время я использую встроенные стили дляпокажите цвета фона,

Может кто-нибудь помочь мне применить этот вид стилей с помощью обычного CSS через некоторые псевдо-селекторы, пожалуйста.

1 Ответ

0 голосов
/ 23 февраля 2019 

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