專注於一個元素改變另一個的CSS

Question

當我想關注另一個元素Hdr_nav_search_input時，我想改變一個元素的顏色Hdr_nav_search_box。這裏是代碼：http://jsfiddle.net/FJAYk/4/我不明白爲什麼這不起作用。

<input class="Hdr_nav_search_input" /> 
<div class="Hdr_nav_search_box" /><span>search for location....</span><i>for example: blah blah</i></div> 

-

.Hdr_nav_search_box{ 
padding: 0 5px; 
margin: 7.5px 0; 
width:300px; 
height: 25px; 
background: white; 
} 
.Hdr_nav_search_input:focus .Hdr_nav_search_box{ 
color: #d4d4d4; 
} 
.Hdr_nav_search_box span,.Hdr_nav_search_box i{ 
line-height: 25px; 
color: gray; 
} 
.Hdr_nav_search_input{ 
padding: 0 5px; 
margin: 7.5px 0; 
border: 0; 
z-index: 2; 
position: absolute; 
width:300px; 
height: 25px; 
background: transparent;  
} 

Answer 1

有你的風格的幾個問題。首先你的選擇器瞄準盒子不太對。

.Hdr_nav_search_input:focus .Hdr_nav_search_box 

即應用選擇所有.Hdr_nav_search_box，他們是.Hdr_nav_search_input後裔。

.Hdr_nav_search_input:focus + .Hdr_nav_search_box 

---

其次這個選擇將是壓倒一切的顏色變化，如果這是工作：所以你要使用的下一個兄弟選擇+它實際上是一個兄弟。

.Hdr_nav_search_box span,.Hdr_nav_search_box i{ 
    ... 
} 

你可以使用簡單的

.Hdr_nav_search_box { 
    ... 
} 

---

這裏是一個演示，我做得到它的工作風格的變化。

jsFiddle

.Hdr_nav_search_input:focus + .Hdr_nav_search_box { 
    color: #F00; 
} 
.Hdr_nav_search_box { 
    line-height: 25px; 
    color: gray; 
}