element ~ element와 element + element의 차이점

Question

두 CSS 선택자의 차이점은 무엇입니까? 나는 그들 모두에게서 같은 결과를 얻는다.

HTML :

<div>One</div> 
<p>Two</p> 

CSS Example #1는 :

div+p { 
background:red; 
} 

이것은 <p> 요소를 빨간색 배경을 제공합니다.

CSS Example #2

는 :

div~p { 
background:red; 
} 

이것은 또한 <p> 요소를 빨간색 배경을 제공합니다.

그럼 ...이 두 선택기의 차이점은 무엇입니까? the w3.org에서

Answer 1

:

E + F 즉시 E 요소

E ~ F E 요소 앞세워 F 요소 앞세워 F 요소

중요한 단어는 "즉시"입니다.

HTML에는 다른 요소가 없으므로 차이는 볼 수 없지만 일반적으로 중요합니다.

Answer 2

직접 형제 :

DIV + PP 요소를 직접 DIV 요소에 직접 페이지 요소를

간접 형제를 따라

p는 + * 어떤 요소에 따라

DIV ~ DIV 요소

페이지 후 어디 쪽 요소 ~ * 어디 P 요소 후 어떤 요소

참조 :이 http://www.princexml.com/doc/6.0/selectors/