Question

在CSS3选择器上阅读W3C documentation后，我仍然有点困惑，E F和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 > F，仅当F是E的直接子项时才会匹配（中间没有其他元素）。

虽然

E ~ F

选择一个元素F，前面有元素E。在这种情况下，您有一个非嵌套结构，E和F是兄弟姐妹。

<!-- 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非常不同：如果它是元素 X 的子元素，它匹配匹配F的元素，以便 X 也有一个匹配E的子元素，位于匹配F的子元素之前。考虑简单的类型选择器，这意味着类似

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

就文档树而言，通常可视化，根部位于顶部，这意味着E F与结构中F正下方的E匹配，而{{1} }}匹配与E ~ F位于同一分支中的F，并显示在E之前。

Answer 4

前者选择所有作为E的后代的F.后者选择所有F作为E的兄弟，并且在它之后的任何点发生。

区别在于，在第一种情况下，F必须位于内部 E的某处，而在第二种情况下，F必须是E的父的直接子项。< / p>

事实上，如果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是跨度的兄弟。

E F和E~F css3选择器之间有什么区别

5 个答案: