CSS специфичность / приоритет на основе порядка в таблице стилей?

Question

Я кратко посмотрел на спецификацию 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>

Answer 1

Вы можете использовать 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 он совместим со всеми основными браузерами и IE 7+.

Существуют другие способы реализации решения выше (например, с помощью javascript), если вы заинтересованы.

-- Редактировать:

Я не уверен на 100%, если причина, по которой ваше решение не работает, связана с тем, что браузеры анализируют CSS справа налево, а не слева направо, но я предполагаю, что это как-то связано с этим. Кто-нибудь, пожалуйста, поправьте меня, если я ошибаюсь.