html - CSS选择该元素之后所有相同类型的元素

Question

我有这个代码:

<fieldset id="login">
 <input type="text">
 <input type="password">
 <input type="checkbox" id="inline_invisible">
 <label for="invisible">Login invisible</label>
 <input type="checkbox" id="remember">
 <label for="remember">Remember me</label>
</fieldset>

标签在其中一个输入框获得焦点之前不会显示，所以我有这个 CSS:

#login input:focus + input + label {
   display:inline-block;
}

但当密码框处于焦点状态时，它仅选择第一个标签，而不选择第二个标签，并且对第一个输入框不执行任何操作。我应该怎么办？请仅使用 CSS，我无法更改 html。

谢谢。

Answer 1

尝试

#login input:focus ~ label  {display:inline-block;}

plus(+) selects the adjacent siblings while ~ looks for the next sibling

通用兄弟选择器引用:https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors

相邻同级选择器的引用: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors