css - EF和E~F css3选择器有什么区别

Question

在阅读了关于 CSS3 选择器的W3C 文档后，我仍然有点困惑，EF 和 E ~ F 选择器有什么区别。

E   F   an F element descendant of an E element
E ~ F   an F element preceded by an E element

在我看来，它们是完全一样的。

Answer 1

E F

选择一个元素F，它是 的子项（后代）E。所以你有一个嵌套结构，.E的父（祖先）在哪里F。

<!-- E F will match: -->
<e>
  <f></f>
</e>

这类似于E > Fwhich will only match if Fis a direct child of E(no other elements in between)。

尽管

E ~ F

选择一个F前面有一个元素的元素E。在这种情况下，您有一个非嵌套结构，E并且F是Siblings。

<!-- E ~ F will match: -->
<e></e>
<f></f>

这又类似于，E + F除了这里，F必须E直接跟随（中间没有其他元素）。

Answer 2

在后者中，两个元素“E”和“F”必须是兄弟，而不是父/后代。

这将匹配E F：

<e> ... <f> </f> ... </e>

这将匹配E ~ F

<e> </e> ... <f> </f>

在这两种情况下，都是元素“F”被选中——元素“E”仅用于限制哪个元素“F”。

Answer 3

在这里引起混淆的是家谱隐喻（带有“孩子”、“父母”、“后代”等）。所以让我们看看没有它的问题：

一个元素可能有子元素，例如li列表（ul或ol）中的列表项（）是它的子元素。选择器E F匹配一个匹配的元素F并且是 的子元素E。选择器E ~ F非常不同：它匹配一个匹配的元素，F如果它是元素X的子元素，因此X也有一个匹配的子元素，并且在匹配的那个E之前F。考虑到简单的类型选择器，这意味着类似

<X>...<E>...</E>...<F>this matches E ~ F</F>...</X>

就文档树而言，像往常一样以根在顶部进行可视化，这意味着E F匹配结构中F直接位于下方E的 an，而E ~ F匹配与 anF处于同一级别E并出现在其之前的同一分支中的 an。

Answer 4

前者选择作为 E 的后代的所有 F。后者选择作为 E 的兄弟姐妹并且出现在它之后的任何点的所有 F。

区别在于，在第一种情况下，F 必须在 E内部的某个位置，而在第二种情况下，F 必须是E的父级的直接子级。

事实上，如果 F 元素在E 元素内部，它不可能是 E 的父元素的直接子元素。这意味着这两个选择器不仅不同，而且是互斥的。

一个例子E F：

<e> <f> <f> </e>
    _______

一个例子E ~ F：

<e> </e> <g> </g> <f> </f>
                  ________

Answer 5

答案在问题中：

<p>
    <span id="1"></span>
</p>
<span id="2"></span>

p span{
    /* this matches the span with id=1 */
}
p ~ span{
    /* this matches the span with id=2 */
}

因此，在第一种情况 ( p span) 中，p是跨度的父级。
在第二种情况下（p ~ span），p是跨度的兄弟。