SASS CSS CSS修复包裹在自定义类名中？答案

【问题标题】：SAAS CSS css fix wraped in a custom class name?SASS CSS CSS修复包裹在自定义类名中？
【发布时间】：2017-05-31 03:59:47
【问题描述】：

所以我有这个长的 css 元素选择器，用于角材料 md-tab 活动文本。我想在选项卡激活时更改选项卡标签的文本颜色，我在网上发现这是要通过的选择器并且它可以工作，但我正在处理一个大型项目，所以我只想更改特定的 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;
}

【问题讨论】：

标签： angularjs css angular-material saas

【解决方案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;
  }
}

【讨论】：