在输入类型文本焦点上应用样式以提交按钮

Question

我一定做错了什么,但我找不到原因.这是小提琴

为什么这样做:

#searchClubsForm input[type=text]:focus {
    background: blue;
}

但这不是吗？

#searchClubsForm input[type=text]:focus #searchClubsForm input[type=submit] {
    background: blue;
}

Answer 1

好的,所以你要改变这个:

#searchClubsForm input[type=text]:focus #searchClubsForm input[type=submit] {
    background: blue;
}

对此:

#searchClubsForm input[type=text]:focus + input[type=submit] {
    background: blue;
}

这使用相邻的兄弟选择器在焦点时设置按钮的样式.

http://fiddle.jshell.net/mMJZ8/2/