Question

<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。在小屏幕上方，我将两列设置为一行。

我的序列不收敛。内容如下：引导程序行=（第一行）白色，黑色（第二行）黑色，白色（第三行）白色，黑色

我可以在：nth-child（）中设置第n个术语来给列着色吗？

我尝试了4n + 3和4n + 1，但没有成功。

Answer 1

您可以只使用odd和even

.row {
  display: flex;
}

.cell {
  width: 50px;
  height: 50px;
}

.row:nth-child(odd) .cell:nth-child(odd),
.row:nth-child(even) .cell:nth-child(even) {
  background-color: black;
}

.row:nth-child(odd) .cell:nth-child(even),
.row:nth-child(even) .cell:nth-child(odd) {
  background-color: white;
}

<div class="container">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

如果它们在同一行中，请同意您的评论-这将是您的半角宽度的第n个孩子：

.row {
  display: flex;
  flex-wrap:wrap;
}

.cell {
  width: 50%;
  height: 50px;
}

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

<div class="container">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

这将是您四分之一宽度的第n个孩子：

.row {
  display: flex;
  flex-wrap:wrap;
}

.cell {
  width: 25%;
  height: 50px;
}

.cell:nth-child(8n+1),
.cell:nth-child(8n+3),
.cell:nth-child(8n+6),
.cell:nth-child(8n+8) {
  background-color: black;
}

.cell:nth-child(8n+2),
.cell:nth-child(8n+4),
.cell:nth-child(8n+5),
.cell:nth-child(8n+7) {
  background-color: white;
}

<div class="container">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

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

Answer 3

您发现该模式每4个元素重复一次。然后，您只需要转到第4个元素（4n），然后添加要移动到下一个黑色背景div所需的所有内容。在这种情况下，您需要添加两个以获取第一个，并添加三个以获取第二个。

因此，您可以使用public static class CompanyExtensions{ public static CompanyDto ToCompanyDto(this Company c){ var cDto = new CompanyDto(); cDto.Name = c.Name; cDto.Addresses = new List<AddressDto>(); cDto.Addresses.Add(c.ToAddress1Dto()); cDto.Addresses.Add(c.ToAddress2Dto()); ... return cDto; } public static AddressDto ToCopmanyAddress1Dto(this Company c){ return new AddressDto() { CONTACT_ADDR1 = c.CONTACT_ADDR1, CONTACT_ADDR2 = c.CONTACT_ADDR2, CONTACT_CITY = c.CONTACT_CITY, CONTACT_STATE = c.CONTACT_STATE, CONTACT_ZIP = c.CONTACT_ZIP } } public static AddressDto ToCopmanyAddress2Dto(this Company c){ ... } ... for the other addresses }和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;
}

该序列的第n个术语是什么？

3 个答案: