从组件样式

Question

我有一个名为styles.scss的全局样式文件和组件detail.scss的样式。

名为styles.scss的全局样式文件具有以下类：

.one .two a{
     color: green
}

组件detail.scss的样式也有样式：

.fooColor { 
     color: orange
} 

#idColor {  
     color: yellow
} 

但是，全局样式应用于<a/>元素：

<a class="fooColor">Hello, world!:)</a> <!-- Not OK. The color is green, but should
    be orange -->

如果我设置id，那么颜色就可以了：

<a id="idColor">Hello, world!:)</a> <!--OK. the color is yellow -->

这就是我包含组件样式的方式：

@Component({
    selector: 'foo',
    templateUrl: 'foo.html',
    styleUrls: ['detail.scss'],
    encapsulation: ViewEncapsulation.Emulated, //also tried without 
        //"encapsulation: ViewEncapsulation.Emulated" and "ViewEncapsulation.None"
    moduleId: module.id
})

如何从组件样式应用类.fooColor？

Answer 1

您可以添加锚标记以使选择器更具体，并覆盖全局样式：

a.fooColor { 
    color: orange;
}

添加组件标记是使选择器更具体的另一种方法：

foo a.fooColor { 
    color: orange;
}

Answer 2

.fooColor.fooColor {
    color: orange;
 }

这将增加属性选择的类特异性。