我一直在努力做到这一点...基本上我有以下 HTML 设置：
<div class="box10">
<span class="label01">Name:</span>
<input class="tboxes" type="textbox" />
</div>
“span.label01”是一个内联元素，出现在文本框“input.tboxes”的左侧。当文本框获得焦点时，我正在尝试将一些样式附加到“span.label01”和“div.box10”。
我尝试了以下 CSS 代码：
input.tboxes:focus span.label01 {
color:#FF9900;
...
}
但什么也没发生。我知道这是一个 CSS 选择器问题，但我似乎无法正确处理。我什至尝试过相邻的兄弟选择器，但什么也没有。有人能帮我一下吗？蒂亚！
【问题讨论】：
标签： css css-selectors pseudo-class
这完全可以通过使用同级选择器来实现。
input.tboxes:focus + span.label01 {
color:#FF9900;
...
}
只要输入获得焦点，此规则就会应用于 label01。
然而，这仅在跨度位于输入右侧时才有效，因此您必须切换元素的位置。 div 上的快速“position:relative”和 span 上的“float:left”会将它们移回原位。
【讨论】：
不——你不能用 CSS 选择器来做到这一点。引用Wikipedia:
选择器无法上升
CSS 无法选择满足特定条件的元素的父级或祖先 标准。更高级的选择器方案（例如 XPath）可以实现更复杂的 样式表。然而，CSS 工作组拒绝 > 父选择器提案的主要原因与浏览器性能和增量渲染问题有关。
不过，您可以使用一些简单的 JavaScript 来做到这一点：
// with jQuery:
$('input.tboxes').focus(function() {
$(this).parent().find('span.label01').addClass('active');
});
【讨论】：
此时您的选择器正在寻找输入中的跨度。据我所知，在 CSS 选择器支持的当前状态下，您尝试做的事情并不可靠。
我很想用一些像这样的 jQuery 来做到这一点：
$("input.tboxes").focus(function() {
$(this)
.parent("div:first")
.addClass("focussed")
.find("span")
.addClass("focussed");
});
如果您随后为 .label01.focussed 和 .box10.focussed 设置样式，那应该可以满足您的需求。
【讨论】：