为什么这个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的选择器。