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

【问题标题】：Target a class if a pseudo class of another sibling is triggered如果另一个兄弟的伪类被触发，则定位一个类
【发布时间】：2014-07-11 15:46:12
【问题描述】：

我有这个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>

当我的输入集中时，我需要更改按钮的属性：在 input:focus 上使用 css。在这里，他们是兄弟姐妹，而不是嵌套的。有可能吗？

【问题讨论】：

标签： html css css-selectors pseudo-class

【解决方案1】：

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

input:focus + button{
    background:gold;
}

DEMO

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

input:focus ~ button{
    background:gold;
}

DEMO

【讨论】：

谢谢伙计。它非常有效。这是一个普遍的疑问，是否可以更改不是兄弟而是两级的类的属性，比如父母的父母或其他东西。？
@ynos1234 CSS 中没有父选择器，请检查：stackoverflow.com/questions/1014861/… 并且您也无法在 CSS 中选择之前的兄弟姐妹。