当用户选择其中的文本框时，我想更改 tr 元素的颜色。焦点伪类不使用它。 这可以不用 JavaScript 实现吗？
html:
<table>
<tr>
<td>Name</td><td><input type="text" name="name"></td>
</tr>
</table>
CSS：
tr:focus
{
background:yellow;
}
更新1：
看起来没有 CSS only 方法。使用 JavaScript 最简单的方法是什么？
【问题讨论】：
如何使用 :focus-within...
<table>
<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
</tr>
</table>
CSS：
tr:focus-within {
background:yellow;
}
What helped me. 因为选择的答案对我不起作用。
【讨论】：
没有。 CSS3 中没有主题选择器，不过CSS4 中会有一个。
编辑：
纯 JavaScript 解决方案可以是
var i;
var inputs = document.querySelectorAll("tr > td > input");
for(i = 0; i < inputs.length; ++i){
inputs[i].addEventListener('focus',function(e){
this.parentNode.parentNode.className += ' highlight';
});
inputs[i].addEventListener('blur',function(e){
this.parentNode.parentNode.className = this.parentNode.parentNode.className.replace(/\s*highlight\s*/ig,' ');
});
}
但是，这在 IE≤7 中不起作用，因为 8 之前的版本不知道 document.querySelectorAll (demonstration)。如果您想要一个无忧的跨浏览器解决方案，您可以使用jQuery 和以下代码 (demonstration)：
$("tr > td > input").focus(function(e){
$(this).parent().parent().addClass('highlight');
}).blur(function(e){
$(this).parent().parent().removeClass('highlight');
});
别忘了在你的 CSS 中添加一个 tr.highlight 类。请记住，jQuery 将在未来版本中放弃对旧浏览器的支持（请参阅Browser Support），因此对于 IE ≤8，您必须使用 jQuery 1.x。
【讨论】：
技术上可以通过在足够新的浏览器上使用tabindex 属性来使tr 元素具有焦点，例如<tr tabindex="1">.
但是，聚焦的方法取决于浏览器，而可聚焦的表格行可能是可用性的噩梦。例如，在 IE 和 Firefox 上，当适当地使用 TAB 键时，该行将聚焦，但聚焦的行不接受输入。用户需要再次点击 TAB 才能进入输入字段。在 Firefox 上，但不是在 IE 上，该行也可以通过单击来聚焦，但不能通过单击输入字段（因为这将聚焦在该字段上）。如果您使用 label 标记，作为对可用性和可访问性的推荐，例如
<table>
<tr tabindex="1">
<td><label for="name">Name</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
</table>
...然后点击标签关注输入字段（使用label标记的原因之一！），而不是行元素。
【讨论】：
不，你不能没有 JavaScript。
【讨论】：
【讨论】：