Специфика CSS и/или наследование с предками ⇐ CSS

[Anonymous]

Я пытаюсь оформить некоторые кнопки в соответствии с их предками (особенно не родителями), поэтому... у меня есть следующая структура HTML

Код: Выделить всё

Button B1
Button B2

Button B3
Button B4




Button A1
Button A2

Button A3
Button A4

Ну, как видите, есть две темы .theme-a и .theme-b

Код CSS выглядит так:

Код: Выделить всё

.theme-a {
background: #999;
}
.theme-b {
background: #555;
}
.theme-a button {
background: #222;
}
.theme-b button {
background: #69C;
}

Проблема в том, что если вы поменяете классы темы (A на B и B на A), вы заметите, что кнопка в теме A (которая имеет более близкого предка с классом темы) сохраняет стиль дальнего предка, синий фон, а не черный.

Как добиться должной специфичности, чтобы свойства кнопки устанавливались в соответствии с ближайшим предком?

Вот ссылка из JSfiddle: http://jsfiddle.net/XVaQT/1/

Надеюсь, я объяснил ясно

Спасибо
​

Подробнее здесь: https://stackoverflow.com/questions/133 ... -ancestors