当文本区域处于焦点时，CSS如何设置父项的样式？答案

【问题标题】：CSS how to style a parent item when a textarea is in focus?当文本区域处于焦点时，CSS如何设置父项的样式？
【发布时间】：2011-11-23 07:05:48
【问题描述】：

我有以下

<div class="comment-wrap">
 <textarea></textarea>
</div>

每当 textarea 成为焦点时，我都想设置注释换行 div 的样式。我试过了：

#hallPost-inner + textarea:focus {
    background: red;
}

这不起作用。关于如何在 textarea 处于焦点时设置注释包装 div 样式的任何想法，这意味着光标在 textarea 中闪烁并且用户可以输入？

谢谢

【问题讨论】：

使用 jQuery，你可以这样做：$("textarea").live("focus", function(e) {$(this).closest("comment-wrap").css({background: "red"})});
单独的 CSS 不会这样做（不支持父选择器）。你需要一点 javascript：stackoverflow.com/questions/2212583/…
Complex CSS selector for parent of active child的可能重复

【解决方案1】：

不确定#hallPost-inner 是什么，但通常CSS 选择器不能升序，这意味着您需要有textarea:focus 选择器，但随后需要设置祖先元素的样式，这在css 中无法完成。 Here's 一个很好的资源，等等。该链接还显示了如何实现简单的 javascript 解决方案。

【讨论】：

【解决方案2】：

使用 JavaScript 和 jQuery，您可以：

$("textarea").live("focus", function(e) {
    $(this).closest(".comment-wrap").css({
        "background": "red"
    });
});

【讨论】：

您缺少.，并且误用了live()，在某些情况下可能应该引用textarea。
@davin 谢谢，类选择器已修复。这是如何滥用.live()？仅将.live() 用于事件侦听器实际上只会在document 或window 上创建一个通用事件侦听器。
live 有一些缺点/限制；它不能正确阻止事件传播，它不支持所有 jquery 链式遍历，并且进行常规绑定也只会绑定一个通用事件，即使它有更多 references 对它。

【解决方案3】：

使用伪选择器:focus-within。请注意，任何聚焦的孩子都会影响父母。如果你有更多的孩子，只是想在活动到达<textarea>时申请，你将需要JS。

例如：

form{
  padding: 20px;
  background-color: gainsboro
}

input{
  text-align: center
}

form:focus-within {
  background-color: yellow
}

<form>
  <input type="text" placeholder="name">
  <input type="text" placeholder="lastname">
  <input type="button" value="Go!">
</form>

【讨论】：