“+”和“~”的区别

Question

$('div + p') 和 $('div ~ p') 之间的主要区别是什么。

如果我有这样的东西

<div class="active"></div>
<p class="pactive"></p>

返回相同的值。

Answer 1

X + Y

ul + p {
   color: red;
}

这称为相邻 selector。它只会 select 仅紧接前一个元素之前的元素。在这种情况下，只有每个 ul 之后的第一段才会有红色文本。

X ~ Y

ul ~ p {
   color: red;
}

这个同级组合器与 X + Y 类似，但是没有那么严格。虽然相邻的 selector (ul + p) 只会 select 紧接前一个 selector 之前的第一个元素，但这个元素更通用。它将 select，参考我们上面的示例，任何 p 元素，只要它们跟在 ul 之后。

For Reference

Answer 2

举个例子

div + p

Selects all <p> elements that are placed immediately after <div> elements

p ~ ul

Selects every <ul> element that are preceded by a <p> element and have the same parent element.

查看 CSS REFERENCE Selectors

Answer 3

我找到了答案。

<div class="active"></div>
<p class="pactive"></p>
<div></div>
<p></p>
<div></div>
<p></p>
<div></div>

$("div.active + p") 只会 select p 和 class pactive（即 div 旁边的 p , 等同于 $(div).next();)

Result:

<p class="pactive"></p>

其中 $("div.active ~ p") 将 select 所有兄弟 p 将出现在 div.active only.If 任何 p 元素之后在 div.active 之前 select p.

Result:

<p class="pactive"></p>
<p></p>
<p></p>