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/