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>元素提供了红色背景。

所以..。这两个选择器有什么不同？

Answer 1

来自the w3.org：

E + F紧跟在E元素前面的F元素

E ~ F前面有E元素的F元素

最重要的词是"immediately".

在HTML中，由于没有其他元素，您看不到区别，但这在一般情况下当然很重要。

Answer 2

直系兄弟：

紧跟在

元素后面的div div +p p元素

P+*任何紧跟在p元素后面的元素

间接同级

div ~p p元素后的任意位置

P~*p个元素之后的任何元素

参考： http://www.princexml.com/doc/6.0/selectors/