不,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
(演示)。如果您想要一个无忧无虑的跨浏览器解决方案,您可以使用jQuery和以下代码(演示):
$("tr > td > input").focus(function(e){
$(this).parent().parent().addClass('highlight');
}).blur(function(e){
$(this).parent().parent().removeClass('highlight');
});
不要忘记在tr.highlight
你的 CSS 中添加一个类。请记住,jQuery 将在未来版本中放弃对旧浏览器的支持(请参阅浏览器支持),因此对于 IE ≤8,您必须使用 jQuery 1.x。