使用 nth-child 设置 4 列奇偶网格并选择项目 2、4、5、7、10、12、13、15、18、20答案

【问题标题】：Set 4 column odd even grid using nth-child and select items 2, 4, 5, 7, 10, 12, 13, 15, 18, 20使用 nth-child 设置 4 列奇偶网格并选择项目 2、4、5、7、10、12、13、15、18、20
【发布时间】：2018-10-16 16:33:29
【问题描述】：

我已经为我想要实现的目标添加了静态代码，但我需要它是动态的，这样我才能检测到这些孩子 2、4、5、7、10、12、13、15、18、20.. . 使用“nth-child”。所有子元素都必须在一个父 div 中，而不是在不同的 div 行中。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

我正在创建类似上述结构的内容，并希望仅使用 nth-child 将相同的背景应用于粗体文本。

.PlayersGridItem__row {
  display: flex;
  width:100%;
  flex-wrap: wrap;
}
.PlayersGridItem__item {
  width: 25%;
  position: relative;
  border:1px solid red;
  background: #cccccc;
  padding: 30px;
  box-sizing:border-box;
}
.PlayersGridItem__item:nth-child(2)
  {
  background:#FFF;
  }
  
  .PlayersGridItem__item:nth-child(4)
  {
  background:#FFF;
  }
  
.PlayersGridItem__item:nth-child(5)
  {
  background:#FFF;
  }
  
.PlayersGridItem__item:nth-child(7)
  {
  background:#FFF;
  }

<div class="PlayersGridItem__row">
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>

            </div>
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>

            </div>
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>

            </div>
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>
            </div>
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>

            </div>
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>

            </div>
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>

            </div>
            <div class="PlayersGridItem__item">
              <div class="PlayersGridItem__player-name">
                Noah Andrews
              </div>
            </div>
          </div>

【问题讨论】：

这不是一个很有帮助的问题...您的 HTML 是什么样的？
请张贴您的标记。这是一个清单吗？一张桌子？ Grid/Flexbox 布局？
希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： html css css-selectors

【解决方案1】：

您可以尝试定位奇数/偶数行及其奇数/偶数子代。假设每一行数字是一个单独的.row，每个数字是一个.column：

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

【讨论】：