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

Question

看完W3C documentation关于 CSS3 选择器，我还是有点困惑，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 的 parent(祖先)。

<!-- 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 之后(中间没有其他元素)。