css - 在文本框焦点上，如何仅使用 CSS 更改元素之前的背景颜色？

Question

我目前有一个包含多个字段的表单，设置如下(我们使用的是 Twitter Bootstrap):

<div class="input-prepend">
  <span class="add-on"><i class="icon-envelope"></i></span>
  <input id="contactEmail" type="text" placeholder="E-mail" />
</div>

我想做的是当文本框获得焦点(#contactEmail:focus)时，更改span.add-on 的背景颜色。我熟悉 CSS 选择器以获得 next sibling ，但这只有在文本框紧接着 之前 span.add-on 时才有效。有没有办法只使用 CSS 获取前一个兄弟？我们不支持 IE7 或更低版本，所以任何适用于 IE8+ 的东西都很棒。

提前致谢!

Answer 1

不，没有办法使用 only CSS 来选择前一个兄弟。然而，它可以简单地通过使用 Javascript/jQuery(分别为 .previoussibling 和 .prev())来实现。