html - CSS：触发兄弟姐妹的样式

Question

所以我有一个输入字段和一个这样的按钮：

<span class="btn-wrapper">
    <input type="text" id="mytextfield">
    <button type="submit" id="mysubmitbutton">Go</button>
</span>

我想要的是，当用户关注 时mytextfield，我想为mytextfield和都添加边框mysubmitbutton。

我试过这个但是它失败了：

#mytextfield:focus + #mysubmitbutton{
border-color:solid 1px red;
}

谢谢

Answer 1

你有两个问题：

1. 您正在使用该属性的border速记语法border-color
2. 您需要选择两个元素，而不仅仅是按钮。

这样的：

#mytextfield:focus,
#mytextfield:focus + #mysubmitbutton{
    border:solid 1px red;
}

这是检查这个的小提琴：http: //jsfiddle.net/za4EW/

Answer 2

你有几个问题：

首先您的 html 不正确，您需要关闭input标签，如下所示：

<span class="btn-wrapper">
    <input type="text" id="mytextfield" />
    <button type="submit" id="mysubmitbutton">Go</button>
</span>

你的css不正确，你需要border

#mytextfield:focus + #mysubmitbutton{
     border: solid 1px red;
}

这是一个工作小提琴：http: //jsfiddle.net/LMTmM/