html - 如果触发了另一个兄弟的伪类，则以一个类为目标

Question

我有这个 html:

<div class="header">
    <div class="active-tab-name"> Inbox </div>
        <form class="search-box" method="get" action="#">

            <input type="text" name="search_query" />

            <button class="icon-search"></button>

        </form> 
</div>

当我的输入获得焦点时，我需要更改按钮的属性:使用 css 在 input:focus 上。 在这里他们是 sibling 而不是嵌套。可能吗？

Answer 1

如果按钮是输入的以下同级(如示例代码中所示)，则可以使用直接同级选择器 + :

input:focus + button{
    background:gold;
}

DEMO

如果按钮是输入的同级但不是紧跟在输入之后，你可以使用通用的同级选择器~:

input:focus ~ button{
    background:gold;
}

DEMO