E〜F是否选择多个元素？

Question

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

例如，应选择任何F：

E ~ F.blah 

匹配仅第一架F被二者之前用E并有类“blah”，或全部这样的元素？

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> 

什么是选择，什么是不：

1. 未选择
   该F元素有类 “嗒嗒”，但它不是由一个E开头元素在其父D中。

   请注意，最顶端的E是D的前一个兄弟，而不是F，所以不算。

2. 通过E + F.blah和E ~ F.blah
   该F元素选择是通过在它的父d的E元素之前，并且它具有类“等等”，所以选择器E ~ F.blah匹配。

   由于E元素位于立即此F元素之前，它也匹配E + F.blah。

3. 通过E ~ F.blah选定仅
   该F元素是通过在它的父d的E元件之前，并且它具有类“等等”。然而，在这种情况下，E不再是前面的兄弟姐妹，这个元素将不匹配E + F.blah。

4. 通过E + F.blah和E ~ F.blah
   选定虽然第一E元素不该F元素之前立即位于，存在其中不立即发生之前，因此它也匹配E + F.blah第二E元素。

   顺便说，该元素将选择E:first-of-type ~ F.blah但不选择E:first-of-type + F.blah匹配，因为它的前兄弟E是不是第它的类型，但第二个。

5. 没有选择
   该F元素具有类“等等”，但它不是由在其父d任E元件前面的，因为它在不同的父d是从该示例中的所有的E元素（以及作为唯一的孩子）。

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