我在我的网站上有一些代码有问题,http://ethoma.com/wp/.在搜索栏中,在左侧,我希望通常深灰色的“点击输入搜索”在搜索字段(其兄弟)时变为浅灰色：焦点被触发.这是我目前的代码：
#s
{
min-width:98%;
background-color:#2a2a2a;
color:#d3d3d3;
border:2px solid #000000;
font-size:.85 em;
height:1.9em;
display:inline !important;
border-radius:5px 5px 5px 5px;
}
#s:focus
{
border:2px solid #2a2a2a;
}
#searchsub
{
color:#2a2a2a;
text-align:right;
font-size:.65em;
font-weight:lighter;
}
#s:focus #searchsub
{
color:#cccccc;
}
好的,#s是搜索字段,#searchsub是我要转为#cccccc(浅灰色)的div.最后一组花括号似乎是我遇到问题的地方(不是括号本身,而是上面的选择器).正如我所说,#s是#searchsub的兄弟,反之亦然.
解决方法
就像stefmikhail所说,选择器中的空间意味着#searchsub在#s里面.但就HTML而言,这显然是错误的,因为输入字段是空元素,并且您不能在其中包含其他元素.
你想要使用相邻的兄弟选择器,因为#searchsub是#s之后的兄弟：
#s:focus + #searchsub
{
color:#cccccc;
}
