当 <td> 元素之一具有特定 class 时，如何使用 css 为 table 中的所有 <td> 元素设置样式？

Question

当其中一个元素包含某个 class 时，我需要突出显示 table 中的整行。示例：

.whole-row-red-background {
  background-color: red;
}

<table>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class='whole-row-red-background'></td>
      <td></td>
      <td></td>
    </tr>
  </tbody </table>

在上面的示例中，只有 table 中第二行的第一个单元格（第一个 td）设置为红色背景。在这种情况下（第一个 <td> 行中有此 class）我需要 all <td> 行中的元素具有红色背景。

Answer 1

您可以使用通用同级选择器。更多信息在这里：https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

这是您更新后的代码段：

.whole-row-red-background {
  background-color: red;
}

.whole-row-red-background ~ td {
  background-color: red;
}

<table>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class='whole-row-red-background'></td>
      <td></td>
      <td></td>
    </tr>
  </tbody </table>

Answer 2

let td = document.getElementsByClassName("whole-row-red-background")[0]
let tr = td.closest("tr")
tr.style.backgroundColor='red'

.whole-row-red-background {
  background-color: red;
}

<table>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
      <td>z</td>
    </tr>
    <tr>
      <td class='whole-row-red-background'>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
  </tbody> </table>

当 <td> 元素之一具有特定 class 时，如何使用 css 为 table 中的所有 <td> 元素设置样式？

How can you use css to style all <td> elements in a table when one of the <td> elements has a certain class?

html

css

html-table