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

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

3 голосов
/ 12 сентября 2011

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

1 Ответ

5 голосов
/ 12 сентября 2011

Вы можете использовать дочерний селектор 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 справа налево, а не слева направо, но я предполагаю, что это как-то связано с этим. Кто-нибудь, пожалуйста, поправьте меня, если я ошибаюсь.

...