3

CSS3 Selectorsの仕様を簡単に調べましたが、この問題を回避する方法が見つかりませんでした。さらに、CSS宣言を移動したときに、この結果が変わるとは思っていませんでしたが、変わります。どんな助けでも素晴らしいでしょう。

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>

4

1 に答える 1

5

E > F子セレクターは、次のような問題の解決策として使用できます。

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

このチャートhttp://www.quirksmode.org/css/contents.htmlによると、すべての主要なブラウザーおよびIE7+と互換性があります。

興味があれば、上記のソリューションを実装する他の方法があります（たとえば、javascriptを介して）。

- 編集：

ソリューションが機能しない理由が、ブラウザがCSSを左から右ではなく右から左に解析するためかどうかは、100％わかりませんが、それはそれと関係があると思います。私が間違っていたら誰かが私を訂正してください。

于 2011-09-12T01:58:39.290 に答える