Question

根据http://www.w3.org/TR/2001/CR-css3-selectors-20011113/，选择器E ~ F匹配“前面有E元素的F元素”。我很困惑这是否只意味着一个F，或者任何以E开头的F。

例如，选择器应该是：

E ~ F.blah

只匹配前面有E并且有“blah”类或者所有这样的元素的第一个F？

Answer 1

它匹配任何和所有这些元素，只要它们在同一个父元素下。

与相邻的同级组合子+不同，一般同级组合子~不需要元素紧跟另一个元素。由于没有这样的位置限制，~不携带任何第一匹配语义。（事实上，+也没有，但在这个意义上它仍然受到更多限制;见下文。）

这也意味着如果元素与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>

选择了什么，什么不是：

未选中
这个F元素有“blah”类，但它的父D中没有E元素。

请注意，最顶端的E是D的前一个兄弟，而不是F，因此不计算在内。
由E + F.blah和E ~ F.blah 选择这个F元素在其父D中以E元素开头，并且它具有类“blah”，因此它匹配选择器E ~ F.blah。

由于E元素在此F元素之前立即，因此它也匹配E + F.blah。
仅由E ~ F.blah选择
这个F元素在其父D中前面有一个E元素，它有类“blah”。但是，在这种情况下，E不再是前一个兄弟，此元素与E + F.blah不匹配。
由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不是它的第一个类型，而是第二
未选中
这个F元素有类“blah”，但它的父D中没有任何E元素，因为它与示例中所有E元素的父D不同（以及它是唯一的子元素）。 p>

对于它的价值，不可能只选择匹配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 */
}

E~F是否选择了多个元素？

1 个答案: