仅使用 css 更改多个元素的样式

Question

我需要在 table 中更改多个元素的背景颜色，但不允许我使用 javascript。

起初我实现了一个代码来查看我需要的结果，这次使用 javascript。代码有效，但正如我所说，我需要用 NO javascript 实现一些东西。仅 CSS。

如您所见，我在 table 中有几行，单击单元格 1 或 2 后，正确的行会呈现某种颜色模式。这种模式适用于我的 table 中的所有行（最终实现中将有 12 行）。

我找到了针对单个元素的解决方案，我在 div 元素中显示了该解决方案，但它仅适用于一个元素。我不知道如何用我需要的颜色模式连续更改所有 td。

顺便说一句，每行将有 35 个单元格。它不会像本例中那样只有 5 个。

document.getElementById("td_1_0").addEventListener("click", ()=>{
    document.getElementById("td_1_1").classList.toggle("cRed");
    document.getElementById("td_1_2").classList.toggle("cYellow");
    document.getElementById("td_1_3").classList.toggle("cRed");
    document.getElementById("td_1_4").classList.toggle("cLime");
    document.getElementById("td_1_5").classList.toggle("cLime");
});
document.getElementById("td_2_0").addEventListener("click", ()=>{
    document.getElementById("td_2_1").classList.toggle("cRed");
    document.getElementById("td_2_2").classList.toggle("cYellow");
    document.getElementById("td_2_3").classList.toggle("cRed");
    document.getElementById("td_2_4").classList.toggle("cLime");
    document.getElementById("td_2_5").classList.toggle("cLime");
});

html {
    text-align: center;
}
table {
    width: 100%;
}
td {
    border: 1px black solid;
}
.cRed {
    background-color: red;
}
.cLime {
    background-color: lime;
}
.cYellow {
    background-color: yellow;
}
div {
    background-color: lightgray;
    height: 200px;
}
input:checked + div { background-color: cyan;}

<table>
    <tr>
        <td id="td_1_0">1</td>
        <td id="td_1_1">A</td>
        <td id="td_1_2">B</td>
        <td id="td_1_3">C</td>
        <td id="td_1_4">D</td>
        <td id="td_1_5">E</td>
    </tr>
    <tr>
        <td id="td_2_0">2</td>
        <td id="td_2_1">F</td>
        <td id="td_2_2">G</td>
        <td id="td_2_3">H</td>
        <td id="td_2_4">I</td>
        <td id="td_2_5">J</td>
    </tr>
</table>
    
<label>
    <input type="checkbox" hidden>
    <div>click to change (div)</div>
</label>

Answer 1

我并不是说这是个好主意，但它可以实现您想要做的事情，而无需任何 javascript。它使用与您的示例相同的复选框 hack div.

在 table 之前为每一行添加一个复选框。
在相应行中为相应的复选框贴上标签。（这允许单击单元格来切换复选框。）
绝对定位标签，使点击区域覆盖整个单元格。
使用一堆笨拙的兄弟和第 n 个子选择器来定位适当的单元格并更改它们的颜色。

这显然不理想，但如果您没有其他选择，它对于相对较小的 table 是可行的。

table {
    width: 100%;
}

td {
    border: 1px black solid;
    position: relative;
}

input[type=checkbox] {
  display: none;
}

label {
  position: absolute;
  inset: 0;
}

#row1:checked ~ table tr:first-child :nth-child(2) {
  background: red;
}

#row1:checked ~ table tr:first-child :nth-child(3) {
  background: yellow;
}

#row1:checked ~ table tr:first-child :nth-child(4) {
  background: red;
}

#row1:checked ~ table tr:first-child :nth-child(5) {
  background: green;
}

#row1:checked ~ table tr:first-child :nth-child(6) {
  background: green;
}


#row2:checked ~ table tr:nth-child(2) :nth-child(2) {
  background: red;
}

#row2:checked ~ table tr:nth-child(2) :nth-child(3) {
  background: yellow;
}

#row2:checked ~ table tr:nth-child(2) :nth-child(4) {
  background: red;
}

#row2:checked ~ table tr:nth-child(2) :nth-child(5) {
  background: green;
}

#row2:checked ~ table tr:nth-child(2) :nth-child(6) {
  background: green;
}

<input type="checkbox" id="row1" />
<input type="checkbox" id="row2" />
<table>
  <tr>
    <td><label for="row1"></label>1</td>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr tabIndex="0">
    <td><label for="row2"></label>2</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    <td>I</td>
    <td>J</td>
  </tr>
</table>

Answer 2

如果你能影响后端的 table 构造，那么试试这样的事情：

html {
  text-align: center;
}

input:checked~.cRed {
  background-color: red;
}

input:checked~.cLime {
  background-color: lime;
}

input:checked~.cYellow {
  background-color: yellow;
}

.table {
  display: table;
  width: 100%;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px black solid;
}

.cell:first-child {
  visibility: collapse;
  width: 1%;
}

.cell:not(.clickable) {
  pointer-events: none;
}

<div class="table">
  <label for="1" class="row">
      <input id="1" class="cell" type="checkbox" hidden>
      <div class="cell clickable">1</div>
      <div class="cell cRed">A</div>
      <div class="cell cYellow">B</div>
      <div class="cell cRed">C</div>
      <div class="cell cLime">D</div>
      <div class="cell cLime">E</div>
    </label>
  <label for="2" class="row">
      <input id="2" class="cell" type="checkbox" hidden>
      <div class="cell clickable">2</div>
      <div class="cell cRed">A</div>
      <div class="cell cYellow">B</div>
      <div class="cell cRed">C</div>
      <div class="cell cLime">D</div>
      <div class="cell cLime">E</div>
    </label>
</div>

无论您将获得什么解决方案，您都必须在每个 table 单元格上至少设置颜色类。这样，如果后端决定更改颜色，那么它将自动发生。

但是如果你想在 CSS 侧设置模式，那么你可以使用 input:checked~:nth-child(3 ... 36) 而不是 input:checked~.cRed。这样它会自动重复所有 12 行：

html {
  text-align: center;
}

input:checked~:nth-child(3),
input:checked~:nth-child(5) {
  background-color: red;
}

input:checked~:nth-child(6),
input:checked~:nth-child(7) {
  background-color: lime;
}

input:checked~:nth-child(4) {
  background-color: yellow;
}

.table {
  display: table;
  width: 100%;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px black solid;
}

.cell:first-child {
  visibility: collapse;
  width: 1%;
}

.cell:not(.clickable) {
  pointer-events: none;
}

<div class="table">
  <label for="1" class="row">
      <input id="1" class="cell" type="checkbox" hidden>
      <div class="cell clickable">1</div>
      <div class="cell">A</div>
      <div class="cell">B</div>
      <div class="cell">C</div>
      <div class="cell">D</div>
      <div class="cell">E</div>
    </label>
  <label for="2" class="row">
      <input id="2" class="cell" type="checkbox" hidden>
      <div class="cell clickable">2</div>
      <div class="cell">A</div>
      <div class="cell">B</div>
      <div class="cell">C</div>
      <div class="cell">D</div>
      <div class="cell">E</div>
    </label>
</div>

其他方式是使用锚标签：
这与使用兄弟选择器的方法相同。但是您必须为 12 行中的每一行创建 2 个锚标记。

编辑： 您可以实现 CSS 仅滚动下方：

<!DOCTYPE html>
<html>

<head>
  <style>
    html {
      text-align: center;
    }
    
    input:checked~:nth-child(3),
    input:checked~:nth-child(5) {
      background-color: red;
    }
    
    input:checked~:nth-child(6),
    input:checked~:nth-child(7) {
      background-color: lime;
    }
    
    input:checked~:nth-child(4) {
      background-color: yellow;
    }
    
    .table {
      display: table;
      width: 700px;
    }
    
    .row {
      display: table-row;
    }
    
    .cell {
      display: table-cell;
      left: 0;
      border: 1px black solid;
    }
    
    .cell:not(.clickable) {
      pointer-events: none;
      z-index: -100;
    }
    
    .cell:first-child {
      display: none;
    }
    
    .clickable {
      background-color: white;
      position: sticky;
      left: 0;
      width: 2rem;
      z-index: 100;
      background-color: wheat;
    }
    
    .container {
      height: 100px;
      width: 400px;
      overflow-x: scroll;
      border: 1px solid green;
    }
  </style>
</head>

<body>
  <div class=container>
    <div class="table">
      <label for="1" class="row">
        <input id="1" class="cell" type="checkbox" hidden>
        <div class="cell clickable">1</div>
        <div class="cell">A</div>
        <div class="cell">B</div>
        <div class="cell">C</div>
        <div class="cell">D</div>
        <div class="cell">E</div>
      </label>
      <label for="2" class="row">
        <input id="2" class="cell" type="checkbox" hidden>
        <div class="cell clickable">2</div>
        <div class="cell">A</div>
        <div class="cell">B</div>
        <div class="cell">C</div>
        <div class="cell">D</div>
        <div class="cell">E</div>
      </label>
    </div>
  </div>
</body>

</html>

仅使用 css 更改多个元素的样式

Change multiple element's style with css only

html

css

background-color