html - CSS3 - 聚焦父元素的样式

Question

我知道我可以像这样在焦点输入元素上设置样式：

input:focus
{ 
  background-color:yellow;
}

但是当输入有焦点时，是否可以在父元素上设置样式？例如

<div class="foo">
      <input type="text />
      Hello
</div>

当输入在这里有焦点时，我可以影响“foo”样式吗？

编辑：可能重复影响 :focus'd 元素的父元素（首选纯 CSS+HTML）

但是，有人可以解释它是如何工作的吗？

Answer 1

css 中没有父选择器（还）。http://css-tricks.com/parent-selectors-in-css/

但是，您可以使用 jQuery 选择它：

html

<div class="parent">
    <input type="text" />
</div>

css

.parent {
    /* parent styles */
}
.parent.active {
    /* do stuff when the input is hovered */
}

js

// listen for a focus event on the input,
//  and then add a class to the parent
$('input').on('focus', function () {
    $(this).parent().addClass('active');
});

http://jsfiddle.net/M64nv/

Answer 2

不，CSS 中没有父选择器，因此当父元素之一悬停时（或基于任何子元素条件），您无法在父元素上触发样式规则。为此，您需要使用 Javascript。