如何根据祖先div将样式应用于后代div？

Question

假设下面的html结构，我需要基于存在类app-dropdown__trigger__icon的祖先来覆盖ancestor-module类中的样式。我使用的是余烬，因此app-dropdown__trigger__icon和ancestor-module位于单独的模块中，即，我无法轻易地从孩子的scs中引用祖先。有没有一种方法可以基于祖先的类来实现条件样式？

<td id="ember1249" class="lt-cell align-center ember-view">
  <div id="ember1254" class="ember-view">
    <div class="ancestor-module">
      <div id="ember1259" class="ember-view">
        <div id="ember1264" class="__app-dropdown__aa494 ember-view">
          <div id="ember1274" aria-owns="ember-basic-dropdown-content-ember1269" tabindex="0" data-ebd-id="ember1269-trigger" role="button" class="app-dropdown__trigger ember-basic-dropdown-trigger ember-view">
            <span class="app-dropdown__trigger__icon">
	      					<i id="ember1275" aria-hidden="true" class="fa fa-house ember-view"></i>
	    				</span>
          </div>
          <div id="ember-basic-dropdown-content-ember1269" class="ember-basic-dropdown-content-placeholder" style="display: none;"></div>
        </div>
      </div>
    </div>
  </div>
</td>

Answer 1

我不知道ember.js如何影响它，但是在普通CSS中，我会这样：

.app-dropdown__trigger__icon {
    color: green;
}

.ancestor-module .app-dropdown__trigger__icon {
    color: red;
}

据我所知，SCSS不会影响该解决方案。