CSS选择器和~选择器的区别[重复]

Question

我看到一个。类别1~。class2选择器，并且必须查找它。

div ~ p {}

选择每个

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

然后是选择器：

div + p {}

选择所有

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

我认为这些是等价的，还是我遗漏了什么？




Answer 1

不同之处在于将选择下一个（相邻的）单个元素，而~将选择同一级别上所有前面的元素。但无论如何，你有定义，所以我想贡献一些简单的现实世界场景，以便更好地理解。

div + p {
    color: red;
}

使用

div ~ p {
    color: red;
}

演示2使用~

在这里，在第一个例子中，它选择与div相邻的p元素，但不会选择与第一个p相邻的p元素，而如果使用~，它将选择所有后面跟着div元素的p元素。

Answer 2

从规范：选择器级别3

8.3.1.相邻兄弟组合符（）

由两个序列表示的元素在文档树中共享相同的父级，由第一个序列表示的元素紧接着由第二个序列表示的元素。

8.3.2.一般同级组合符（~）

两个序列表示的元素在文档树中共享同一父元素，第一个序列表示的元素在第二个序列表示的元素之前（不一定立即）。

Answer 3

在您的特定场景中，这两个选择器是等效的，但在更一般的场景中不是。

有一个重要的区别，组合器声明：

由两个序列表示的元素在文档树中共享相同的父级，由第一个序列表示的元素紧接着由第二个序列表示的元素。

想象一下这个场景：

<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技术的严肃机构，和W3C学校，后者是一个相当糟糕的信息来源！