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>