CSS Focus无法影响其他元素

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元素.

选择另一个不是引用元素(我知道)的后代的元素的唯一方法是使用兄弟选择器(通用或相邻).但是,该解决方案依赖于dom层次结构中作为兄弟节点的引用元素(输入)和目标(标题).

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

对于记录,该示例使用通用兄弟选择器(〜),但在这种情况下,相邻(+)也可以正常工作.

以下是兄弟(和孩子)选择器的更好解释:http://css-tricks.com/child-and-sibling-selectors/

以下是与兄弟选择器相关的兼容性问题的概述:http://caniuse.com/#search=sibling(tl; dr,这些天得到了广泛的支持)