angularjs - SASS CSS css 修复包含在自定义类名中？

Question

所以我有这个用于 Angular Material md-tab 事件文本的长 css 元素选择器。我想在选项卡激活时更改选项卡标签的文本颜色，我在网上发现这是要经过的选择器并且它有效，但我正在处理一个大型元素，所以我只想更改特定的 md-选项卡不是元素中的每个 md-tab。那么我如何用类名包装这个长选择器呢？所以只有当我使用这个类名时，这个选择器才会起作用。

md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon {
  color: rgb(130,152,86) !important;
}

Answer 1

将您的 css 包装在一个类中，该类写在您使用特定 md-tab 的地方。

HTML:

<div class="my-div-used-this-md-tabs">
    <md-tabs></md-tabs>
</div>

SCSS:

.my-div-used-this-md-tabs {
  md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon {
    color: rgb(130,152,86) !important;
  }
}