元素〜元素和元素+元素的区别

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元素之前的F元素

重要的字是“立即”。

在您的HTML中，因为您没有其他元素，所以看不到差异，但在一般情况下它当然很重要。

Answer 2

直接兄弟姐妹：

DIV + PP元素直接跟div元素

P + *任何直接跟随P元素

间接同级元素

个

DIV〜PP元素的div元素

P上之后的任何地方〜*后的任意位置p元素的任何元素

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