这个序列的第 n 项是什么？答案

【问题标题】：What is the nth term for this sequence?这个序列的第 n 项是什么？
【发布时间】：2020-01-02 19:26:06
【问题描述】：

<div class="row form-row ">
    <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">White BG</div>
    <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">Black BG</div>
    <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">Black BG</div>
    <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">White BG</div>
    <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">Black BG</div>
</div>

我想为在第 n 项确定的 div 的背景着色。我正在使用引导列来排列这些 div。在小屏幕上，我将两列设置为一行。

我的序列没有收敛。它是这样的：引导行 =（第一行）白色，黑色（第 2 行）黑色、白色（第三排）白色，黑色

我可以在 :nth-child() 中设置第 n 个术语来为这样的列着色？

我尝试过 4n+3 和 4n+1 但都没有成功。

【问题讨论】：

请分享相关标记并为每个 div 指定所需的颜色
当您交替行时，您将使用nth-child(odd) 和nth-child(even)
@fcalderan 我已经插入了我的标记，这是使用 bootstrap 4
@Pete 不起作用，因为第二行是白色黑色，当我想要黑色时，白色
您需要调整媒体查询中的第 n 个术语。没有单一的解决方案。

标签： css css-selectors logic sequence

【解决方案1】：

您发现该模式每 4 个元素重复一次。然后，您只需要转到第 4 个元素 (4n)，然后添加移动到下一个黑色背景 div 所需的数量。在这种情况下，您需要添加两个才能到达第一个，添加三个才能到达第二个。

这意味着你可以使用4n+2 和4n+3：

.row {
  display: flex;
  flex-flow: row wrap;
  width: 300px;
}

.squareBG {
  width: 150px;
  flex: 0 0 150px;
  height: 150px;
  background: white;
}

.squareBG:nth-child(4n+2),
.squareBG:nth-child(4n+3) {
  color: white;
  background: black;
}

<div class="row form-row ">
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">White BG</div>
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">Black BG</div>
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">Black BG</div>
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">White BG</div> <!-- 4n -->
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">White BG</div>
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">Black BG</div> <!-- +2 -->
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">Black BG</div> <!-- +3 -->
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">White BG</div>
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">White BG</div>
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">Black BG</div>
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">Black BG</div>
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">White BG</div>
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">White BG</div>
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">Black BG</div>
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">Black BG</div>
  <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">White BG</div>
</div>

【讨论】：

【解决方案2】：

.row .squareBG:nth-child(4n+2) {
  background-color: black;
  color: white
}
.row .squareBG:nth-child(4n+3) {
  background-color: black;
  color: white
}

<div class="row form-row ">
    <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">White BG</div>
    <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">Black BG</div>
    <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">Black BG</div>
    <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">White BG</div>
    <div class="squareBG col-xs-12 col-sm-6 col-lg-3 border">Black BG</div>
</div>

【讨论】：

您好，感谢您的努力，但这行不通，因为该行是引导行，并且列在一行中重复。
知道了。由于您需要行中的每一列都有另一种颜色，因此我更新了代码。检查这是否适合您。
@ynwebdev 检查我发布的更新解决方案。