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上。在这里，他们是兄弟姐妹，而不是嵌套。有可能吗？

Answer 1

如果按钮是输入的以下兄弟（如示例代码中所示），则可以使用直接同级选择器+：

input:focus + button{
    background:gold;
}

<强> DEMO

如果按钮是输入的兄弟但不是输入后的直接按钮，则可以使用通用同级选择器~：

input:focus ~ button{
    background:gold;
}

<强> DEMO

如果触发了另一个兄弟的伪类，则定位一个类

1 个答案: