В чем разница между элементом-элементом и элементом + элементом

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> элемент красный фон.

Итак ... в чем разница между этими двумя селекторами?

Answer 1

От the w3.org:

E + F элемент Р непосредственно предшествует E элемента

Е ~ F элемент F предшествует элементу E

Важным словом является «немедленно».

В вашем HTML, поскольку у вас нет другого элемента, вы не можете видеть разницу, но это, конечно, важно в общем случае.

Answer 2

Прямая одноуровневый:

DIV + PP элементы, которые непосредственно следуют Див элементы

р + * любые элементы, которые непосредственно следуют из р элементов

Косвенное Sibling

ДИВ ~ рр элементы в любом месте после Div элементов

р ~ * любые элементы в любом месте после р элементов

Ссылка: http://www.princexml.com/doc/6.0/selectors/