css":focus"伪类和选择器

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"会将它们移回原位.