发表于： 2017-06-10 23:44:30
1 1061
今天完成的事情：
在组件元数据里定义 styles 属性，是一个含CSS代码的字符串数组：
组件样式不同于传统和全局style（即 <style> 元素）两种方式。
h1{} 它仅限里当前 HeroAppComponent 组件有效，除组件外的其他任何 h1 元素都不会受影响。
在组件模块化里，这种方式的CSS比传统CSS更加有优势：
1.支持CSS类名和选择器，且限当前组件上下文有意义。
2.CSS类名和选择器不会与应用程序中其他类和选择器相冲突。
3.应用程序的其他地方无法修改组件样式。
4.组件的CSS代码、组件类、HTML代码可以放在同一文件里。
5.随时可以更改或删除组件的CSS代码，不必担心可能在别的地方已经被使用，只关心组件自身。
特殊选择器
1、宿主元素（:host）
使用 :host 伪类选择器应用到组件的宿主元素里。换言之，:host 的使用只对目标元素有效。
:host {
display: block;
border: 1px solid black;}这是唯一一种对目标宿主元素设置样式的方式，组件内的其他选择器是无法应用它，因为它不是组件自己模板的一部分。并且是在父组件的模板中有效。当然除此之外，我们还可以针对个别的宿主元素设置样式
2、宿主祖先元素（:host-context）
有时需要通过外部条件来改变宿主元素的样式，例如，可能需要根据 <body> 元素设置的CSS主题类，然后再其基础做对我们组件进行修改。
用法和 :host() 类似，使用 :host-context() 伪类，括号里面可以指定根选择器。比如下面示例是针对带 theme-light 类下所有 h2 元素有效。
:host-context(.theme-light) h2 {
background-color: #eef;}3、宿主元素样式的穿透（/deep/）
有时候需要对组件样式和其子组件样式同时设置样式时，这就需要 /deep/ 来穿透影子边界了。
比如下面示例是针对所有 <h3> 元素有效，包括组件与子组件下所有 <h3> 元素都有效：
:host /deep/ h3 {
font-style: italic;}/deep/ 选择器还有另外一个别名 >>>。
明天计划的事情：
继续学习angular
问题：
纠结太多小问题
收获：
如上
返回列表
评论