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

加号（+），选择在相邻的兄弟姐妹同时〜查找下一个同级

参考一般兄弟选择：https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors

参考对相邻的兄弟选择器： https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

Answer 2

使用general sibling选择器（~），该选择器将根据焦点输入选择所有label。

（注：+选择只选择一个遵循同级元素）

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

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