CSS Focus无法影响其他元素[重复]答案

【问题标题】：CSS Focus unable to affect other elements [duplicate]CSS Focus无法影响其他元素[重复]
【发布时间】：2012-07-19 23:10:23
【问题描述】：

我环顾四周，找不到在表单获得焦点时显示标题的解决方案。我可能遗漏了一些非常明显的东西（可能无法使用此选择器完成）。

理想情况下，我想避免使用 jQuery 并坚持使用 CSS（更高级的 CSS 也可以），因为我没有计划支持 IE - 我喜欢学习，但 IE 对我来说太痛苦了。

这是我目前的 CSS：

#search-title {
    color: rgba(0, 0, 0, 0);
    font-size: 20px;
    font-weight: 300;
    margin-left: -30px;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}

input[type="text"]:focus #search-title {
    color: #F70;
    margin-left: 35px;
}

提前致谢，

山姆

【问题讨论】：

DOM 中的#search-title 元素相对于输入在哪里？
@Neil - 标题不相关，“搜索表单”浮动到右侧。目前它是一个假人，所以没有表单动作等。<div id="forum-header"> <div id="search-form"> <form> <input type="text" placeholder="Search"/> </form> </div> <h2>Forums</h2><h2 id="search-title">: Search</h2> </div>
那么我认为你不能在纯 CSS 中做到这一点，因为你的选择器不能选择任意 DOM 元素，它仅限于选择你的弟弟妹妹（通过 + 和 ~）和孩子（通过 > 和空格）。

标签： html css focus pseudo-class

【解决方案1】：

好的，我有一个完全使用 CSS 的解决方案，但是您将不得不稍微调整一下您的 html 元素。

选择另一个不是引用元素后代的元素（据我所知）的唯一方法是使用sibling selector（一般或相邻）。但是，该解决方案依赖于引用元素（输入）和目标（标题）是 dom 层次结构中的同级元素。

这是一个简单的例子：http://jsfiddle.net/7AaDc/1/

作为记录，该示例使用通用兄弟选择器 (~)，但在这种情况下相邻的 (+) 也可以正常工作。

这是对兄弟（和子）选择器的更好解释：http://css-tricks.com/child-and-sibling-selectors/

以下是与兄弟选择器相关的兼容性问题的简要说明：http://caniuse.com/#search=sibling（tl;dr，这些天得到了广泛的支持）

【讨论】：

这正是我要找的！（嗯，足够近，我可以拿走和使用）非常感谢 Ninja :D 我确实非常简要地查看了兄弟选择器，但当时我认为它对我没有帮助。

【解决方案2】：

您已经使用了后代选择器，这意味着“#search-title”必须出现在您的输入元素内中才能匹配规则——这显然不会发生。

考虑到文档的结构，当您的输入是任何特定状态时，实际上没有一个 CSS 选择器会匹配 #search-title。

【讨论】：

【解决方案3】：

也许在表单中尝试一个 div 可能会成功

或者，试试One of these

【讨论】：

【解决方案4】：

在我看来，问题就像您正在尝试为未嵌套的项目设置样式，即

input[type="text"]:focus #search-title

说当它是匹配“input[type="text"]:focus”的元素的子元素时，使用 id "search-title" 设置元素的样式，但从您发布的 sn-p 来看，我猜它实际上不是DOM 意义。

您可以查看兄弟样式选择器（例如，“A + B”匹配项目 B，但仅当它具有前面的兄弟 A 时），特别是“~”可能会有所帮助，但如果元素在 DOM 中完全不同那么你可能不得不做一些棘手的事情来重构你的 DOM，或者回退到 javascript。

【讨论】：