如何使用CSS选择器修改兄弟姐妹的属性,如:focus？

Question

我在我的网站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的兄弟,反之亦然.

Answer 1

就像stefmikhail说,你的选择手段的空间#searchsub是内部的 #s.但就HTML而言,这显然是错误的,因为input字段是空元素,并且您不能在其中包含其他元素.

您想要使用相邻的兄弟选择器+,因为#searchsub之后的兄弟是#s:

#s:focus + #searchsub
{
    color:#cccccc;
}

Answer 2

使用

+

相邻同级组合器 （仅当它紧跟在第一个元素之后）

~

一般兄弟组合器 （仅当它跟随第一个元素时（尽管不一定立即）

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator