CSS的+选择器和~选择器有什么区别？

Question

今天我看到了一个.class1 ~ .class2选择器，不太熟悉，所以进行了查询。

div ~ p {}

选择每个由<div>元素前面紧跟的<p>元素。换句话说，

<div></div>
<p></p>

那么被选中的是<p></p>，对吗？

然后还有一个+选择器：

div + p {}

选择所有紧接在 <div> 元素后面的 <p> 元素。换句话说，<div> 和 <p> 要相邻。

<div></div>
<p></p>

我理解为这些是等价的，还是我漏掉了什么？

- Michael Lewis

---

w3c 和 w3schools 不同，请不要混淆两者。请勿将它们搞混。 - naththedeveloper

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ - Paulie_D

我很惊讶这不是一个重复的问题 - Zach Saucier

Answer 1

在您特定的情况下，这两个选择器是等效的，但在更一般的情况下则不然。

有一个重要的区别，+ 组合器表示：

引用块中说到：“由这两个序列表示的元素在文档树中共享相同的父级，并且由第一个序列表示的元素立即紧随由第二个序列表示的元素。”

想象一下这种情况：

<div></div>
<p></p>      <!-- this will be selected with the + combinator -->

<p></p>      <!-- these two paragraphs will be affected by the ~ combinator -->
<p></p>      <!-- but NOT by the + combinator -->

请不要混淆W3C，这是一个标准化Web技术的严肃机构，和w3schools，它是一个信息来源相当糟糕的网站！

- Christoph

---

注意到w3schools并非由W3C制作。 - Michael Lewis

Answer 2

来自规范: 选择器级别 3

8.3.1. 相邻兄弟组合器 (+)

由两个元素序列表示的元素在文档树中拥有相同的父元素，并且第一个序列所代表的元素紧接着位于第二个序列所代表的元素之前。

8.3.2. 普通兄弟组合器 (~)

由两个元素序列表示的元素在文档树中拥有相同的父元素，并且第一个序列所代表的元素在第二个元素之前（不一定是立即的）。

- MarcinJuraszek

Answer 3

区别在于+会选择紧接着的相邻单一元素，而~将选择同级别之前的所有元素。不管怎样，你已经了解了定义，所以我想为了更好地理解，贡献一些简单的真实世界场景。

div + p {
    color: red;
}

演示 使用+

---

div ~ p {
    color: red;
}

Demo 2 使用~

在第一个示例中，它选择了与div相邻的p元素，但不会选择后续相邻的p，而如果你使用~ ，它将选择所有跟随div元素的p元素。

- Mr. Alien