假设下面的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>
最佳答案
我不知道ember.js如何影响这一点,但是在普通CSS中,我会这样做:
.app-dropdown__trigger__icon {
color: green;
}
.ancestor-module .app-dropdown__trigger__icon {
color: red;
}
据我所知,SCSS不会影响该解决方案。
关于css - 如何将样式应用于基于祖先div的后代div?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51273269/