＆＃34; +＆＃34;之间的区别和＆＃34;〜＆＃34;

Question

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

如果我有这样的东西

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

返回相同的值。

Answer 1

举个例子

div + p

  

选择紧跟在<p>元素

之后的所有<div>元素

p ~ ul

  

选择<ul>元素前面的每个<p>元素和具有相同的父元素。

查看 CSS REFERENCE Selectors

Answer 2

X + Y

ul + p {
   color: red;
}

这被称为相邻选择器。它将仅选择前一个元素前面的元素。在这种情况下，每个ul后只有第一段会有红色文字。

X~Y

ul ~ p {
   color: red;
}

这个兄弟组合器类似于X + Y，但是它不那么严格。虽然相邻的选择器（ul + p）只会选择紧跟前一个选择器之前的第一个元素，但这个选择器更加通用。它将参考我们上面的例子选择任何p元素，只要它们遵循ul。

<强> For Reference

Answer 3

我找到了答案。

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

$("div.active + p")只会选择p pactive类p（即div旁边的$(div).next();，与<p class="pactive"></p> 相同<） / p>

  

结果：

$("div.active ~ p")

其中p将选择仅在div.active之后的所有同级p。如果在div.active之前有任何p元素，那么不要选择<p class="pactive"></p> <p></p> <p></p> 。

  

结果：

{{1}}