css - 为什么这个 CSS 选择器没有像我预期的那样工作？

Question

为什么下面的代码没有将“Won”染成红色？我希望 #sisters>*~#too 选择所有元素谁有最终的 sibling #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>

中南合作:http://jsfiddle.net/Supuhstar/XY4Dg/

Answer 1

您不能在 CSS 上以升序方式选择元素。您可以只选择后代和之后的元素。所以使用这个选择器:

#sisters>*~#too 

你正在这样搜索:

• 所有 id 为的元素
  • 那是 sibling ~
    • 任何直系子女 >*
      • 与 id 姐妹 在一个标签中

这样 CSS 选择器总是选择在选择器上设置的满足所有先前条件的最后一项。