CSS 일반 형제가 작동하지 않음 : 포커스?

Question

텍스트를 표시하고 싶을 때 사용자가이 텍스트를 가리키면 텍스트 대신 입력 양식이 표시됩니다. 덮개를 벗기면 다시 텍스트로 바뀝니다. 그러나 사용자가 입력 양식에 초점을 맞추면 입력 양식은 노출되지 않아도 유지됩니다.

문제가있어 unhovered하지만 입력 폼이 집중되는 경우, 입력 폼 및 텍스트 요소 (텍스트 요소가 숨겨져 야) 볼 수 있다는 것이다.

나는이이 HTML 코드

<div class="editable"> 
    <span>hello</span> 
    <input value="hello" /> 
</div> 

이 CSS를 사용하고 있습니다 : 여기

.editable :last-child { display: none; } 

.editable:hover > :first-child { display: none; } 
.editable:hover > :last-child { display: block; } 

.editable > :last-child:focus { display: block; } 
.editable > :last-child:focus~:first-child { display: none; } // <- this doesn't work! 

JSfiddle : http://jsfiddle.net/a8U3P/

합니까 사람이 작동하지 않는 이유 실마리가 ?

편집 : 나는 파이어 폭스 (13)와 크롬

Answer 1

을 시도한 general sibling combinator는 E ~ F는 E 요소 앞세워 F 요소와 일치합니다. "선행"은 E 요소가 보다 앞에 있고, 요소가 F 요소임을 의미합니다.

첫 번째 자녀가 일 때 마지막으로 정확히이 올 것으로 예상되는 경로는 정확히 무엇입니까? "first"와 "last"의 정의에 의해, 이것은 어떤 요소와도 일치 할 수 없습니다.