场景：需要根据实际项目需求，修改引入的第三方组件的部分样式
目录
- 修改父组件的元素的样式
- 修改子组件的元素的样式
- 依据父组件有无某个类，来修改组件本身的样式
一、修改父组件的元素的样式
:host
:host伪类，这是在组件内部获取到其宿主元素的唯一方式，会向上一直查找到根元素body
具体使用方法：
// 默认当前在一个组件中，该组件位于一个父组件中，且该组件引入了第三方子组件
// 以下内容为当前组件引用的css文件里的内容
// 第一种方式
// ele : 当前元素
ele:host h1 {
font-size: 20px;
}
// 效果： 修改父组件的h1元素字体大小为20px。
// 第二种方式
ele:host(.active) h1 {
font-size: 20px;
}
// 效果: 修改父组件类为active元素下的h1元素的字体大小。
二、 修改子组件的元素的样式
/deep/ 或 >>>
/deep/ 和 >>> 是一个意思两种写法，都是操作子组件的元素的。
具体使用方法：
ele /deep/ h1 {
font-size : 16px;
}
// 效果：/deep/ 最好是写在一个元素后面， 不然编辑器lint会报红， 这里是查找子组件的h1元素，并修改它的字体大小
等同于：
ele >>> h1 {
font-size : 16px;
}
三、 依据父组件有无某个类，来修改组件本身的样式
:host-context
:host-context，和:host类似，都是获取宿主元素，虽然都是查找宿主元素，但它们是有区别的， :host修改的还是宿主元素，:host-context修改却是当前组件，后者是针对父组件是否具备某个类名作出相应的样式改变响应。
具体使用方法：
ele:host-context(.active) h1 {
border: 1px dotted #f00;
}
// 效果： 当宿主元素拥有active类时，才修改当前组件的h1元素的border属性样式。
