이 CSS 선택기가 예상대로 작동하지 않는 이유는 무엇입니까?

Question

왜 다음 코드의 색이 "Won"이 아닌지?#sisters>*~#too에 #too (즉, #too 전의 모든 항목, 즉 #won)의 형제가있는 모든 항목을 선택해야합니다. 그러나 #sisters>*~#too으로 #too 만 선택합니다.

간단히 말해 #sisters>*~#too은 이전 형제 인 #won을 선택하지 않은 이유는 무엇입니까?

<style> 
#sisters>#too~*, 
#sisters>*~#too { 
    color: red; 
} 
</style> 
<div id="sisters"> 
    <div id="won">Won</div> 
    <div id="too">Too</div> 
    <div id="tree">Tree</div> 
    <div id="fore">Fore</div> 
    <div id="jive">Jive</div> 
</div> 

SSCCE는 : http://jsfiddle.net/Supuhstar/XY4Dg/

Answer 1

당신은 CSS에 상승하는 방식으로 요소를 선택할 수 없습니다. 하위 요소와 후 요소 만 선택할 수 있습니다.

#sisters>*~#too 

당신은이 방법으로 검색 :이 선택에 따라서 ID로

• 모든 요소를 ​​too
  • 형제는 직접 어린이의 ~
    • 것을 >*
      • 태그

  는 CSS 선택기는 항상 이전의 모든 조건을 충족 선택기에 seted 마지막 항목을 선택하여 그 방법

.

Answer 2

일반 형제 결합 자로 알려진 물결표는 요소의 왼쪽에서 일치하는 모든 형제를 선택합니다. CSS에서 셀렉터를 사용하여 선행 요소를 선택할 수있는 방법이 없습니다.