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元素

重要的词是“立即”。

在你的HTML中，由于你没有其他元素，你无法看到差异，但在一般情况下它当然很重要。

Answer 2

直接同级：

  

div + p p直接跟随div元素的元素

p + *任何直接跟随p元素的元素

间接同级

  在div元素之后的任何地方

div~p p元素

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

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