覆盖组件的自动生成的子项 css； Angular

Question

在 Angular 中，有一个 ui-select 组件正在为其视觉生成跨度：

如您所见，此跨度已自动分配 css class 的“.btn”，它是将组件着色为特定颜色 - 应用程序中各种按钮的颜色。

我需要的是通过下拉菜单覆盖它而不是一个按钮，因此它不需要看起来像一个按钮。

为了覆盖它，我已将 "search_drop" class 分配给具有 !important 属性的父 div，如您所见。

css "search_drop" 的定义是：

.search_drop {
    font-family: HPSimplified, Arial !important;
    color: black;
    background: none !important;
}

结果是一样的。

请问如何覆盖 span 的样式？ .btn css class 需要保持不变。

谢谢！

Answer 1

尝试

.search_drop .ui-select-match .btn {
    font-family: HPSimplified, Arial !important;
    color: black;
    background: none !important;
}

获得正确的特异性水平。

这只会影响 ui-select 个组件中的 .btn 类

Overriding component's auto generated childrens css; Angular