HTML Geschwister-Selektor funktioniert nicht, wenn Klasse hinter dem Ziel ist

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; 
} 

Die Geschwister-Selektor wird nur angewendet, wenn die angestrebte Klasse vor dem div ist. Sollte es nicht unabhängig von der Spannenordnung angewendet werden?

Was ich versuche zu erreichen, ist immer die Spannen in der Box, die eine Verlierer-Klasse enthält.

Codepen wenn Sie wollen spielen, um: http://codepen.io/shooshte/pen/grxJpZ

Answer 1

Nein, die Bestellung nicht irrelevant ist. Siehe here für die Dokumentation in MDN

Der ~ combinator trennt zwei Selektoren und entspricht das zweite Element nur, wenn es durch die ersten voran ist, und beide ein gemeinsam Eltern teilen.

Answer 2

Das Geschwister-Selektor nur dann angewandt wird, wenn die Klasse vor dem div gezielt ist. Sollte es nicht unabhängig von der Spannenordnung angewendet werden?

Nein, von the spec:

und die durch die erste Sequenz, dargestellt Element voran (nicht notwendigerweise unmittelbar), um die durch das zweite dargestellte Element

CSS so ausgelegt ist, dass nachdem der Parser dem DOM ein Element hinzugefügt hat, er alle die Regeln kennt, die auf dieses Element angewendet werden. Dies verhindert, dass auf das gesamte Dokument gewartet werden muss, bevor es erkennen kann, welche Regeln für ein Element gelten.