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을 모두 선택할 수 있습니다.

는