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

我在我的网站上有一些代码有问题,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;
}

原文地址：https://www.jb51.cc/css/215345.html