使用:target选择器更改整个表格行的背景颜色的CSS方法

Question

我有一个包含多行和2列的表格。当使用#highlight:target时，我希望整个表格行的背景色变化。我已经能够使用<td id="highlight">使单个单元格更改颜色，但不能在<tr id="highlight">上实现。

CSS:

#highlight:target {
  background-color: #FF9900;
  -webkit-transition: all 1s linear;
}

HTML:

<a href="#highlight">Highlight!!</a>
<table>
  <tr id="highlight">
    <td>First Column</td>
    <td>Second Column</td>
  </tr>
</table>

我可以使用 :target 选择器更改整个行的背景颜色吗？

- Callum Watkins

---

Chrome，这将在所有浏览器上工作[除非您在td元素上设置了背景]（http://jsfiddle.net/7dmc3oc1/1/），因为单元格将位于行的顶部。 - user4639281

我认为@tribe84提供的答案是最适合这种情况的，因为我的一些表格已经具有背景样式。 - Callum Watkins

无论你想做什么，只要声明你的 MCVE 可以正常工作，这就不是一个真正的问题。 - user4639281

语法错误！<td>...</th> - Stickers

@Pangloss 噢，抱歉 ;) 已经修复了，哈哈。 - Callum Watkins

Answer 1

您需要定位单元格。

#highlight:target td {
  background-color: #FF9900;
  -webkit-transition: all 1s linear;
}

- tribe84

Answer 2

将以下 CSS 添加到您的样式标签中。

#highlight td {
  background-color: #FF9900;
  -webkit-transition: all 1s linear;
}

- belal ahmad

---

这段话的意思是：“这段内容和2015年被接受的答案完全相同，唯一不同的是它没有包含原帖作者要求使用:target选择器的那一部分。” - TylerH