问使用CSS向“n”元素替换集添加背景色
EN

Stack Overflow用户

提问于 2022-01-28 08:35:59

回答 3查看 161关注 0票数 2

我试图在'n'元素的交替集合中添加背景颜色。例如，第一个'n'元素数将是红色，下一个'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>

css-grid

javascript

html

css

回答 3

Stack Overflow用户

发布于 2022-01-28 08:57:54

是的，使用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>

票数 2

Stack Overflow用户

发布于 2022-01-28 08:54:09

我将尝试将每一行划分为一个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>

票数 1

Stack Overflow用户

发布于 2022-01-28 08:52:15

`.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>