使用 CSS 将背景颜色添加到交替的“n”个元素集答案

【问题标题】：Adding background color to alternate set of 'n' number of elements using CSS使用 CSS 将背景颜色添加到交替的“n”个元素集
【发布时间】：2022-01-31 13:53:30
【问题描述】：

我正在尝试为 'n' 个元素的交替集添加背景颜色。例如，第一个 'n' 个元素将是 red，接下来 'n' 个元素将是黑色等..重复红色和黑色的循环。

请忽略4中的数字 网格模板列：重复（4，自动） 它应该是动态的

我无法更改 HTML 结构，也无法使用 <table> 进行更改

这只能使用 css 来实现吗？如果不是 JS 答案也将不胜感激

.table {
  margin-bottom: 20rem;
  border: grey 0.5px solid;
  display: grid;
  width: 100%;
  border-collapse: collapse;
}

.table-cell {
 display: flex;
 align-items: center;
 padding: 1em;
 border: grey 1px solid;
}

.table-cell:nth-child(4n) {
  background-color: #e0e0e0;
}

.table-row {
  grid-template-columns: repeat(4, auto);
  display: grid;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
  </div>
</div>

【问题讨论】：

你可以在你的项目中使用 sass 吗？
如果你不能使用 sass，一个简单的 CSS 解决方案就像做“很多” :nth-child(x) 语句，其中 x 是 4 的倍数。所以 nth-child( 4)/8/12/16/...所以你有几种颜色重复
是的，我可以使用 sass，并且只会重复 2 种颜色
我的意思是感觉就像一张桌子tbh，你能把同样的结构放到一张桌子上然后<tr>做吗？
内容是动态的，我不应该用表结构来做

标签： javascript html css css-grid

【解决方案1】：

可以使用Xn+y，但在多个选择器中，这不能使用单个选择器完成。

.table {
  margin-bottom: 20rem;
  border: grey 0.5px solid;
  display: grid;
  width: 100%;
  border-collapse: collapse;
}

.table-cell {
  display: flex;
  align-items: center;
  padding: 1em;
  border: grey 1px solid;
}

.table-cell:nth-child(8n+4),
.table-cell:nth-child(8n+3),
.table-cell:nth-child(8n+2),
.table-cell:nth-child(8n+1) {
  background-color: #e0e0e0;
}

.table-row {
  grid-template-columns: repeat(4, auto);
  display: grid;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
  </div>
</div>

【讨论】：

当数字 4 不是动态时，我认为这是绝对最聪明的方法。
每行的单元格数是不可预测的，所以这行不通
那么这在 CSS 中是不可能的

【解决方案2】：

我会尝试将每一行划分为table-row，然后您可以使用以下样式来设置您的交替background-color 规则。

div.table-row:nth-child(even) {background: #ffd110}
div.table-row:nth-child(odd) {background: #e1e1e1}

我添加了另一行来演示。

.table {
  margin-bottom: 20rem;
  border: grey 0.5px solid;
  display: grid;
  width: 100%;
  border-collapse: collapse;
}

.table-cell {
 display: flex;
 align-items: center;
 padding: 1em;
 border: grey 1px solid;
}


.table-row {
  grid-template-columns: repeat(4, auto);
  display: grid;
}

div.table-row:nth-child(even) {background: #ffd110}
div.table-row:nth-child(odd) {background: #e1e1e1}

<div class="table">
  <div class="table-row">
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
  </div>
  <div class="table-row">
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
  </div>
  <div class="table-row">
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
  </div>
  <div class="table-row">
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
  </div>
</div>

【讨论】：

是的，这是一个不错的方法，但内容是动态的，我无法更改 html 结构

【解决方案3】：

`.table {
  margin-bottom: 20rem;
  border: grey 0.5px solid;
  display: grid;
  width: 100%;
  border-collapse: collapse;
}

.table-cell {
 display: flex;
 align-items: center;
 padding: 1em;
 border: grey 1px solid;
}

.table-cell:nth-child(2n) {
  background-color: black;
}

.table-cell {
  background-color: red;
}

.table-row {
  grid-template-columns: repeat(4, auto);
  display: grid;
}`


<div class="table">
  <div class="table-row">
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
  </div>
</div>

【讨论】：

请添加一些关于您的解决方案的说明。