css - 如何使用 :focus? 等 CSS 选择器修改 sibling 的属性

Question

我的网站上的一些代码有问题，http://ethoma.com/wp/ .在左侧的搜索栏中，我希望通常是深灰色的“按回车键进行搜索”在搜索字段(其兄弟) :focus 被触发时变成浅灰色。这是我目前拥有的代码:

    #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 的 sibling ，反之亦然。

Answer 1

正如 stefmikhail 所说，选择器中的空格意味着 #searchsub inside #s。不过，就 HTML 而言，这显然是错误的，因为 input 字段是空元素，您不能在其中包含其他元素。

你想使用相邻的兄弟选择器 + 代替，因为 #searchsub 是 #s 之后的兄弟:

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