1

我一直在努力做到这一点......基本上我有以下 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 选择器问题，但我似乎无法正确处理。我什至尝试过相邻的兄弟选择器，但什么也没有。有人能帮我一下吗？蒂亚！

4

3 回答 3

5

这完全可以通过使用同级选择器来实现。

input.tboxes:focus + span.label01 {
   color:#FF9900;
   ...
}

每当输入聚焦时，此规则将应用于 label01。

但是，这仅在跨度位于输入右侧时才有效，因此您必须切换元素的位置。div 上的快速“位置：相对”和跨度上的“浮动：左”会将它们移回原位。

于 2010-08-19T13:33:18.593 回答
4

不——你不能用 CSS 选择器做到这一点。引用自维基百科：

选择器无法上升

CSS 无法选择满足特定条件的元素的父级或祖先。更高级的选择器方案（例如 XPath）将支持更复杂的样式表。然而，CSS 工作组拒绝 > 父选择器提案的主要原因与浏览器性能和增量渲染问题有关。

但是，您可以使用一些简单的 JavaScript 来做到这一点：

// with jQuery:
$('input.tboxes').focus(function() {
    $(this).parent().find('span.label01').addClass('active');
});
于 2009-04-28T11:08:17.240 回答
2

您的选择器目前正在寻找输入中的跨度。据我所知，在 CSS 选择器支持的当前状态下，您尝试做的事情并不可靠。

我很想用一些 jQuery 来做到这一点，如下所示：

$("input.tboxes").focus(function() {
    $(this)
    .parent("div:first")
        .addClass("focussed")
        .find("span")
            .addClass("focussed");
});

如果您随后为 .label01.focussed 和 .box10.focussed 设置样式，那应该可以满足您的要求。

于 2009-04-28T11:04:03.223 回答