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

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

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

альтернативный текст http://www.pauldwaite.co.uk/images/so/1905834.png

Answer 3

Попробуйте:

.box { background-color: inherit;  }

См: http://jsbin.com/imube/edit

Answer 4

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

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