SAAS CSS css 修复包含在自定义 class 名称中的问题？

Question

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

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 包裹在 class 中，它写在您使用特定 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;
  }
}

SAAS CSS css 修复包含在自定义 class 名称中的问题？

SAAS CSS css fix wraped in a custom class name?

css

saas

angularjs

angular-material