使用 css :nth-child 选择器对列表项进行样式设置答案

【问题标题】：Styling list items by using css :nth-child selector使用 css :nth-child 选择器对列表项进行样式设置
【发布时间】：2018-07-18 15:16:15
【问题描述】：

我有 ul 列表项，我希望它们的样式如下图所示。有没有办法通过使用 css nth-child 选择器或仅使用 css 的任何其他方式来设置它的样式。

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
  border:1px solid white;
}
li:nth-child(1) {
  background: lightsteelblue;
}

<ul>
    <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>
    <!--There may be more list items -->
  </ul>

【问题讨论】：

你可以在课堂上做到...
你已经设法在这个例子中以不同的方式格式化了第一个列表项，已经使用 :nth-child - 那么现在究竟剩下什么问题/问题......？
不能通过课堂来做到这一点，@CBroe 你可以通过看到接受的答案来理解我的问题。
“您可以通过查看已接受的答案来理解我的问题” - 如果我们需要查看答案来弄清楚问题是什么，这是一个糟糕的问题开始与。
如果你看到我的图形，你会发现一个模式。我可以说来自服务器的数据。我的错。很抱歉造成误解。

标签： javascript html css css-selectors

【解决方案1】：

使用li:nth-child(4n + 1), li:nth-child(4n + 4):

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
  border:1px solid white;
}
li:nth-child(4n + 1), li:nth-child(4n + 4) {
  background: lightsteelblue;
}

<ul>
    <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>
    <!--There may be more list items -->
  </ul>

【讨论】：

非常感谢您的回答。

【解决方案2】：

使用选择器li:nth-child(4n), li:nth-child(4n+1)

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
  border:1px solid white;
}
li:nth-child(4n), li:nth-child(4n+1)  {
  background: lightsteelblue;
}

<ul>
    <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>
    <!--There may be more list items -->
  </ul>

【讨论】：

【解决方案3】：

为什么不将它们按类别分类？即使你可以用第 n 个孩子做到这一点，但是当你想要改变某些东西时很难，你还必须改变你的公式。

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  border:1px solid white;
}

li.lightsteelblue {
  background: lightsteelblue;
}

li.slategrey {
  background: slategrey;
}

<ul>
    <li>One</li>
    <li class="lightsteelblue">Two</li>
    <li>Three</li>
    <li>Four</li>
    <li class="slategrey">Five</li>
    <li>Six</li>  
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <!--There may be more list items -->
  </ul>

【讨论】：

不能使用类。因为这是从 api 渲染的。