html - CSS:触发 sibling 的样式

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;
}

这是检查这个的 fiddle : http://jsfiddle.net/za4EW/