Изменить специфику по ребенку

Question

Я хотел бы интегрировать тег темы в мои элементы, чтобы они отображались в разных цветах. Но поскольку селекторы css имеют одинаковую специфику css, последняя переопределяет ранее определенное правило.

это пример, который показывает мою проблему:

<div class="red">
  <div class="box">This should be red</div>
  <div class="yellow">
    ...
        <div class="box">This should be yellow (nested in x levels under the div.yellow)</div>
    ...
</div>

а вот мой css

.box { width: 100px; height: 100px; }
.yellow { background-color: yellow; }
.red { background-color: red; }

поле должно быть где-то указано, но как только оно станет дочерним для другого определения цвета, оно должно быть перезаписано.

спасибо за любую помощь!

Answer 1

Вы не должны делать что-то таким образом - если ваша тема меняется, то вдруг что-то с классом yellow на самом деле может быть синим, например. Я бы предложил найти общий способ именования вещей (даже если это просто colour1, colour2, colour-highlight...) а затем указав эти стили. Затем вы можете посмотреть, как создаются ваши страницы, и сделать правила более конкретными при необходимости (либо с помощью !important или сделав правило более конкретным, например, .colour1 становление .box .colour1 или же div.colour1).

Answer 2

Пытаться:

.box { background-color: inherit;  }

Смотрите: http://jsbin.com/imube/edit

Answer 3

Я не совсем вижу проблему. Вот что я получу с этим кодом:

http://www.pauldwaite.co.uk/images/so/1905834.png

Answer 4

Вам, вероятно, нужно использовать ключевое слово ! Important, например:

.yellow { background-color: yellow !important;}