Question

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

Answer 1

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

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

只要输入被聚焦，此规则将适用于label01。

然而，这只适用于跨度位于输入右侧的情况，因此您必须切换元素的位置。 div上的快速“position：relative”和跨度上的“float：left”会将它们移回原位。

Answer 2

不 - 你不能用CSS选择器做到这一点。引自Wikipedia：

选择器无法提升

CSS无法选择满足某些元素的父元素或祖先元素   标准。更高级的选择器方案（例如XPath）将使更复杂   样式表。但是，CSS工作组拒绝提议的主要原因是：父选择器与浏览器性能和增量渲染问题有关。

但是，您可以使用一些简单的JavaScript来执行此操作：

// with jQuery:
$('input.tboxes').focus(function() {
    $(this).parent().find('span.label01').addClass('active');
});

Answer 3

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

我很想用一些jQuery这样做：

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

如果您为.label01.focussed和.box10.focussed设置样式，那么应该执行您想要执行的操作。

css“：focus”伪类和选择器

3 个答案: