最大的区别是’+’最多只能匹配到一个元素,而’~’可以匹配到多个。
‘+’是指紧跟在后面的某同级元素
‘~’是指某些同级元素
以以下代码为例
<div class='try'></div>
<p class='one'></p>
<p class='two'></p>
如果是+
.try + p
那么选中的只是类名为one的p
如果是~
.try ~ p
那么选中的是类名为one和类名为two的p
<div class='try'></div>
<h2></h2>
<p class='one'></p>
<p class='two'></p>
那么
.try + p
则什么也选择不到
.try ~ p
则没有影响