当类在目标后面时，HTML兄弟选择器不工作

Question

HTML：

<div class="wraper">
  <div class="box">  
    <span class="text">Test2</span>
    <span class="loser text">Test1</span>
  </div>
  <div class="box">
    <span class="text">Test1</span>
    <span class="text">Test2</span>
  </div>
  <div class="box">
    <span class="loser">Test1</span>
    <span class="text">Test2</span>
  </div>
</div>

的CSS：

.wraper .loser ~ .text {
  color: pink;
}

只有当目标类位于div前面时，才会应用兄弟选择器。不管跨度排序如何都不应该应用它？

我想要实现的是始终为包含失败者类的框中的跨距着色。

Codepen如果你想玩游戏： http://codepen.io/shooshte/pen/grxJpZ

Answer 1

不，订购并非无关紧要。有关MDN中的文档，请参阅here

  

〜组合器分离两个选择器并匹配第二个选择器   元素仅在第一个 之前，并且两者共享一个共同元素   父节点。

Answer 2

  

只有当目标类位于div前面时，才会应用兄弟选择器。不管跨度排序如何都不应该应用它？

不，来自the spec：

  

并且第一个序列所代表的元素先于（不一定是立即）第二个序列所代表的元素

CSS的设计使得在解析器向DOM添加元素之后，它知道 all 将应用于该元素的规则。这可以防止必须等待整个文档被解析，然后才能知道哪些规则适用于元素。