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 */ 
}