css - element~element 和 element+element 有什么区别

Question

这两个 CSS 选择器有什么区别。我从他们那里得到了相同的结果。

HTML：

<div>One</div>
<p>Two</p>

CSS 示例 #1：

div+p {
background:red;
}

这使<p>元素具有红色背景。

CSS 示例 #2：

div~p {
background:red;
}

这也为<p>元素提供了红色背景。

那么......这两个选择器有什么区别？

Answer 1

来自w3.org：

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

E ~ F一个 F 元素，前面有一个 E 元素

重要的词是“立即”。

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

Answer 2

直系兄弟姐妹：

直接跟在 div 元素之后的 div + pp 元素

p + * 任何直接跟在 p 元素之后的元素

间接兄弟

div 元素之后的任何位置的 div ~ pp 元素

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

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