如何根据表头属性高亮显示父表行

Question

当表头的属性为commit="123"时，我想更改整个表行的颜色(使用CSS(。我试过这个：

[commit="123"] {
  color:#aaffff;
  background-color:#111111;
}

但是，这只会更改表格标题(1(。如何选择表头提交设置为"123"的整个表行(1条目1(？谢谢

[commit="123"] {
  color: #aaffff;
  background-color: #111111;
}

<table class="code">
  <tbody>
    <tr>
      <th id="1" commit="123">1</th>
      <td>
        <i>entry 1</i>
      </td>
    </tr>
    <tr>
      <th id="2" commit="456">2</th>
      <td>
        <i>entry 2</i>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

为什么不将commit应用于表行而不是表头？不幸的是，CSS目前不支持父级的反向选择器。

[commit="123"] {
  color: #aaffff;
  background-color: #111111;
}

<table class="code">
  <tbody>
    <tr id="1" commit="123">
      <th>1</th>
      <td>
        <i>entry 1</i>
      </td>
    </tr>
    <tr id="2" commit="456">
      <th>2</th>
      <td>
        <i>entry 2</i>
      </td>
    </tr>
  </tbody>

Answer 2

您不需要将commit添加到表头(即th(，而是需要将其写入以满足您的需求。

希望这能有所帮助。

Answer 3

您可以使用通用的同级组合子(~(来选择行中所有以下的td。

这不会对tr进行样式化，没有CSS选择器可以随心所欲，但您可以通过这种方式获得类似的效果。

[commit="123"],
[commit="123"]~td {
  color: #aaffff;
  background-color: #111111;
}

<table class="code">
  <tbody>
    <tr>
      <th id="1" commit="123">1</th>
      <td>
        <i>entry 1</i>
      </td>
      <td>
        <i>entry 1.2</i>
      </td>
    </tr>
    <tr>
      <th id="2" commit="456">2</th>
      <td>
        <i>entry 2</i>
      </td>
      <td>
        <i>entry 2.2</i>
      </td>
    </tr>
</table>