スタイルシートの順序に基づくCSSの特定性/優先度？

Question

私はCSS3 Selectors specを少し見ましたが、この問題を解決する方法は何も見つかりませんでした。さらに、私は、CSS宣言を動かすときにこの結果が変わることを期待していませんでしたが、それはそうです。どんな助けも素晴らしいだろう。それはすべての主要なブラウザとIEとの互換性があり、このチャートhttp://www.quirksmode.org/css/contents.htmlによる

div.green_colour > div.has_colour{ 
    background-color: green; 
} 
div.red_colour > div.has_colour{ 
    background-color: red; 
} 

：

div.green_colour div.has_colour{ 
 
    background-color: green; 
 
} 
 
div.red_colour div.has_colour{ 
 
    background-color: red; 
 
}

<div class="red_colour"> 
 
    <div class="green_colour"> 
 
    <div class="has_colour"> 
 
     I would like this to be green 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="green_colour"> 
 
    <div class="red_colour"> 
 
    <div class="has_colour"> 
 
     I would like this to be red 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

は、次のような問題の解決策としてE > F子セレクタを使用することができます7+

上記のソリューションを実装するには、他の方法があります（javascriptなど）もし興味があれば。

- 編集：

私は仕事しないソリューションの理由が原因のブラウザでは、左から右への代わりに、右から左にCSSを解析するという事実のためであれば、100％わからないんだけど、私は仮定それはそれと関係があります。私が間違っているなら誰か私を修正してください。