爲什麼這個CSS選擇器不能按我的預期工作？

Question

爲什麼下面的代碼不會着色爲「Won」紅色？我期望#sisters>*~#too選擇與#too（也就是說，#too之前的所有項目，即#won）有最終的兄弟姐妹的所有項目。但是，#sisters>*~#too只能選擇#too。

總之，爲什麼#sisters>*~#too不選擇其前兄弟，#won？

<style> 
#sisters>#too~*, 
#sisters>*~#too { 
    color: red; 
} 
</style> 
<div id="sisters"> 
    <div id="won">Won</div> 
    <div id="too">Too</div> 
    <div id="tree">Tree</div> 
    <div id="fore">Fore</div> 
    <div id="jive">Jive</div> 
</div> 

SSCCE：http://jsfiddle.net/Supuhstar/XY4Dg/

Answer 1

您不能選擇在CSS方式方興未艾元素。您可以選擇剛纔的後代和元素。所以用這個選擇：

#sisters>*~#too 

您正在尋找這樣：

• 與ID的所有元素too
  • 這是兄弟~
    • 任何直接的兒童中>*
      • 在標籤id sisters

這樣的CSS選擇器始終選擇seted在滿足所有上述條件選擇的最後一個項目。

Answer 2

被稱爲常規同胞組合器的代字號在其左側匹配元素之後選擇任何同胞。不幸的是，現在沒有辦法選擇前面的元素，因爲任何可用於CSS的選擇器。