Применить css на основе последнего предка?

Question

Используя css, я хочу применить различные стили к элементу с классом test. Но стиль должен быть другим, если он находится внутри элемента с классом a или класса b:

<div class="a"> 
    lorem 
    <div class="b"> 
    ipsum 
    <div class="test">&nbsp;</div> 
    </div> 
</div> 

должны получить различный стиль тогда

<div class="b"> 
    lorem 
    <div class="a"> 
    imsum 
    <div class="test">&nbsp;</div> 
    </div> 
</div> 

Но если применить стиль

.a .test { background-color: red; } 
.b .test { background-color: blue; } 

оба будут иметь синий фон: https://jsfiddle.net/emk5fozg/4/

Я хочу, чтобы второй был красным, потому что это более прямой ребенок .a, чем .b.

Проблема заключается в том, что я не могу использовать дочерний селектор >, потому что между соответствующими могут быть около 7 уровней div. (Я посчитал, пожалуйста, не спрашивайте, почему так много.)

Как назначить стили элементам на основе последнего предка?

Чтобы уточнить: я хочу только стилизовать div .test, ничего вокруг них. Есть много других элементов до и после них, которые не должны иметь стиль.

Answer 1

Вы можете сделать это следующим образом:

.a .test, .b .a .test{ background-color: red; } 
 
.b .test, .a .b .test { background-color: blue; }

<div class="a"> 
 
    <div class="b"> 
 
    <div class="test">&nbsp;</div> 
 
    </div> 
 
</div> 
 

 
<div class="b"> 
 
    <div class="a"> 
 
    <div class="test">&nbsp;</div> 
 
    </div> 
 
</div>

Answer 2

вы могли бы сделать это так, просто добавить еще один селектор

https://jsfiddle.net/emk5fozg/2/

.a .b .test { 
    background-color: blue; 
} 

.b .a .test { 
    background-color: red; 
} 

Answer 3

Они тоже самое. Есть так же, как если бы вы написать первый

.test { 
     background-color:red; 
      } 

, а затем изменить его blue.You будет иметь красный цвет только если вы пишете как этот

.b .test { background-color: blue; } 
    .a .test { background-color: red; } 

Answer 4

Самый простой способ слишком указать всю родственную:

.b .a .test { background-color: red; } 
.a .b .test { background-color: blue; } 

и даже более точным, указав прямые родители:

.b > .a > .test { background-color: red; } 
.a > .b > .test { background-color: blue; }