Question

我今天看到了一个.class1 ~ .class2选择器，不得不查找它。

div ~ p {}

选择以<p>元素开头的每个<div>元素。换句话说，

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

将选择<p></p>，对吧？

然后是+选择器：

div + p {}

选择紧跟在<p>元素之后的所有<div>个元素。换句话说，

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

我是否认为这些是等同的，或者我错过了什么？

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与w3schools混为一谈bad source for information！

Answer 2

来自规范：Selectors Level 3

<强> 8.3.1。相邻的兄弟组合子（+）

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

<强> 8.3.2。一般兄弟组合子（~）

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

Answer 3

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

div + p {
    color: red;
}

Demo 使用+

div ~ p {
    color: red;
}

Demo 2 使用~

所以在这里，在第一个示例中，它选择与p相邻的div元素，但不会选择稍后与第一个{{1}相邻的p如果你使用p，它将选择所有~元素后跟p元素。

CSS +选择器和〜选择器之间的区别

3 个答案: