为什么这个CSS选择器不能像我预期的那样工作？

Question

为什么以下代码的颜色不是“Won”红色？我希望#sisters>*~#too选择所有与#too同时拥有最终兄弟的商品（也就是说，#too之前的所有项目，即#won）。但是，#too仅选择了#sisters>*~#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选择器总是选择选择器上最后一个符合所有先前条件的项目。

Answer 2

波浪线（称为General Sibling Combinator）选择元素在其左侧匹配后的任何兄弟。不幸的是，目前在CSS中没有选择带有任何选择器的前一个元素的方法。