问E~F选择多个元素吗？

EN

它匹配任何和所有这类元素，只要它们位于同一个父元素之下。

与相邻的同级组合器+不同，普通的同级组合器~不需要一个元素立即跟随另一个元素。由于没有这样的位置限制，~不带任何第一匹配的语义。(事实上，+也是如此，但在这个意义上它仍然受到更多的限制；参见下面。)

这也意味着，如果一个元素与E + F.blah匹配，那么根据定义，它还必须匹配E ~ F.blah。相反，并不是每个匹配E ~ F.blah的元素都会匹配E + F.blah。

一个例子：

<E></E>
<D>
    <F class="blah"></F> <!-- Not selected [1] -->
    <E></E>
    <F class="blah"></F> <!-- E + F.blah, E ~ F.blah [2] -->
    <F class="blah"></F> <!-- E ~ F.blah only [3] -->
    <F></F>
    <F class="blah"></F> <!-- E ~ F.blah only [3] -->
    <E></E>
    <F class="blah"></F> <!-- E + F.blah, E ~ F.blah [4] -->
</D>
<D>
    <F class="blah"></F> <!-- Not selected [5] -->
</D>

选择了什么，没有选择什么：

1. 未选定 这个F元素有类"blah"，但是它的父元素D中没有E元素。 请注意，最上面的E是D的前一兄弟，而不是F，因此它不被计算。
2. E + F.blah 和 E ~ F.blah选择的 这个F元素在其父D中有一个E元素，它有类"blah"，因此它匹配选择器E ~ F.blah。 由于E元素位于这个F元素之前的，所以它也与E + F.blah匹配。
3. E ~ F.blah only选择的 这个F元素在其父D中有一个E元素，并且它有类"blah“。但是，在这种情况下，E不再是紧邻的同级，这个元素将与E + F.blah不匹配。
4. E + F.blah 和 E ~ F.blah选择的 虽然第一个E元素不在这个F元素之前，但是有第二个E元素就发生在它前面，所以它也与E + F.blah匹配。 顺便说一下，这个元素将匹配选择器E:first-of-type ~ F.blah，而不是选择器E:first-of-type + F.blah，因为它前面的同级E不是第一个类型，而是第二个类型。
5. 未选定 这个F元素有类"blah"，但是它的父D中没有任何E元素，因为它与示例中的所有E元素(以及它的唯一子元素)处于不同的父元素D中。

就其价值而言，不可能只选择与E ~ F.blah匹配的第一个元素(除非它也与E + F.blah匹配，在这种情况下，您只需使用它)。但是，如果您要应用CSS规则，则可以使用覆盖来实现它--只需重复同级组合器：

E ~ F.blah {
    /* Styles for first and following E ~ F.blah */
}

E ~ F.blah ~ F.blah {
    /* Styles for only F.blah following the first E ~ F.blah */
}