Как выделить строку родительской таблицы на основе атрибута заголовка таблицы

Question

Я хочу изменить цвет всей строки таблицы (используя CSS), когда заголовок таблицы имеет атрибут commit = "123". Я пробовал это:

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

Однако это только меняет заголовок таблицы (1). Как выбрать всю строку таблицы (1 запись 1), в которой заголовок таблицы имеет фиксацию, установленную на «123»? Спасибо!

[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

Вы можете использовать общий братский комбинатор (~) , чтобы выбрать все следующие td с в строке.

Это не будет стилизовать tr, нет CSS селектор, который может работать так же, как вы sh, но вы могли бы добиться подобного эффекта таким образом.

[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>

Answer 2

Вместо добавления commit к заголовкам таблицы (т. Е.) th вам нужно записать его, чтобы выполнить ваше требование.

Надеюсь, это поможет.

Answer 3

Почему бы просто не применить 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>