Question

我环顾四周，当表单聚焦时，我无法找到制作标题的解决方案。我可能错过了一些明显的东西（可能是这个选择器无法完成）。

理想情况下，我想避免使用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;
}

提前致谢，

萨姆

Answer 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，这些天得到了广泛的支持）

Answer 2

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

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

Answer 3

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

或尝试One of these

Answer 4

问题在我看来，就像你试图设计一个非嵌套的项目，即

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

表示要设置ID为“search-title”的元素，当它是匹配“input[type="text"]:focus”的元素的子元素时，但是从您发布的代码片段开始，我猜它实际上不是孩子在DOM意义上。

你可以看一下兄弟风格选择器（例如“A + B”匹配项目B，但只有当它有一个前面的兄弟是A）时，特别是“〜”可能有帮助，但是如果这些元素完全不同于那么你可能不得不在重组你的DOM时做一些棘手的事情，或者回到javascript。

CSS Focus无法影响其他元素

4 个答案: