angular 样式

html 的控件外观显示是基于样式的，angular 的 Component 的魔板依赖样式来调整外观。
angular支持sass,less,stylus格式的样式。

import { Component } from '@angular/core';

@Component({
    selector:'app-test-component',
    templateUrl:'./test-component.html',
    styleUrls:['./test-component.css']
})
export class TestComponent{

}

在 @Component 中指定的 样式只会应用在 组件的 html 模板。

特殊的选择器

:host 伪类选择器，用来选择组件宿主元素中的元素。
宿主是父组件模板的一部分。

:host{
    display:block;
    border:1px solid black;
}

:host(.active){
    border-width:3px;
}

:host-context伪类选择器从当前组件的宿主元素的祖先节点查找css类，直到文档的根节点。其文档中举例为主题。

:host-context(.theme-light) h2{
    background-color:#eef
}