元素〜元素和元素+元素的區別

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/